Современные информационные технологии. 4 курс. Лабораторное занятие №3. Fullscreen видео

февраля 24, 2020

Современные информационные технологии. 4 курс. Лабораторное занятие №3. Fullscreen видео

Данное задание предполагает самостоятельное выполнение!

Для создания страницы с динамическим фоном вам потребуется:
CSS, JavaScript, HTML, а также два коротких видеоролика без звука и две обложки из этих роликов. В моем случае это видео длиной 15 секунд.

Часть I. Подготовка видео.
1) Вы берете видео и вырезаете из него 15-секундный фрагмент. Сделать это можно, например, здесь: https://online-video-cutter.com/ru/
2) Теперь нужно убрать из видео звук - браузеры не воспроизводят видеофайлы со звуком. Удалить звук можно здесь: https://cloudconvert.com/mp4-to-mp4
Здесь же можно конвертировать файл в mp4 если он у вас в другом формате.
3) Поскольку для отображения нужно также предоставить видео в веб-формате, необходимо создать из первого файла второй в формате webm. Это можно сделать здесь: https://video.online-convert.com/ru/convert-to-webm

4) Все получившиеся видео (4) вы загружаете в google sites.

Часть II. Стили страницы в CSS:

5) Указываем основное тело страницы:

body {
margin: 0;
background: #000;
}

6) Расположение видео с адресом статичной картинки (загружаете в Google сайты). Это может быть скриншот с вашего видео. Он нужен на тот случай, когда браузер не проигрывает видеоролик:

video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url('https://sites.google.com/site/konoplevmedia/screenshot.png') no-repeat;
background-size: cover;
transition: 1s opacity;
}

7) Эффекты:

.stopfade {
opacity: .5;
}

8) Поскольку в моем проекте горы, то я создаю соответствующий идентификатор (у вас он будет другим). Обратите внимание, что имя идентификатора дублируется и в JavaScript. Тут задаем фон подложки и цвет шрифта:

#mountains {
font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
font-weight: 100;
background: rgba(0,0,0,0.3);
color: white;
padding: 2rem;
width: 80%;
margin: 2rem;
float: right;
font-size: 1.2rem;
}

9) Стиль заголовка:

h1 {
font-size: 3rem;
text-transform: uppercase;
margin-top: 0;
letter-spacing: .3rem;
}

10) Кнопка:

#mountains button {
display: block;
width: 80%;
padding: .4rem;
border: none;
margin: 1rem auto;
font-size: 1.3rem;
background: rgba(255,255,255,0.23);
color: #fff;
border-radius: 3px;
cursor: pointer;
transition: .3s background;
}

11) Кнопка при наведении курсора:

#mountains button:hover {
background: rgba(0,0,0,0.5);
}

12) Ссылка с адресацией:

a {
display: inline-block;
color: #fff;
text-decoration: none;
background:transparent;
padding: .5rem;
transition: .6s background;
}

13) Она же при наведенном курсоре (у меня в прозрачном фоне):

a:hover{
background:transparent;
}

14) Можно сохранить стили как CSS, можно встроить напрямую.

III Динамический сценарий остановки видео:
15) Автозапуск и кнопка остановленного видео:

var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#mountains button");

if (window.matchMedia('(prefers-reduced-motion)').matches) {
vid.removeAttribute("autoplay");
vid.pause();
pauseButton.innerHTML = "остановлено";
}

16) Функция видео:

function vidFade() {
vid.classList.add("stopfade");
}

17) Пауза:

vid.addEventListener('ended', function()
{
vid.pause();
vidFade();
});

18) Кнопки, фиксирующие сценарий:

pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "остановить";
} else {
vid.pause();
pauseButton.innerHTML = "остановлено";
}
})

19) Сохраняете скрипт как JS

IV Теперь непосредственно HTML страницы (создаете отдельный пост в blogger)
20) Сначала указываем параметры страницы и заголовок в теге <title>

<html lang="en">
<head>
<title>Fullscreen Video</title>

21) Встраиваем CSS
22) Закрываем тег </head> внутри тега <body> создаем содержимое страницы.
23) Прежде всего, постер видео в статике:

<video poster="https://sites.google.com/site/konoplevmedia/screenshot.png" id="bgvid" playsinline autoplay muted loop>

24) Источники видео со ссылкой. Обратите внимание, что это один и тот же файл в двух форматах:

<source src="https://sites.google.com/site/konoplevmedia/mountains.webm" type="video/webm"></source>
<source src="https://sites.google.com/site/konoplevmedia/mountains.mp4" type="video/mp4"></source>

25) Закрываем тег </video>

26) Создаем соответствующий объект в теге <div>

- у меня это горы:

<div id="mountains">

27) Далее указываем произвольный текст - в заголовке <h1> и абзацах - <p>.

28) Прописываем тег кнопки с текстом:

<button>остановить</button>

29) Далее закрываете тег <div>
30) Встраиваем минимальную библиотеку jQuery. Она доступна здесь:
https://sites.google.com/site/konoplevmedia/minjq.js

31) После этого вы встраиваете ваш JavaScript.
32) Закрываете теги <body> и <html>, а также делаете фон заголовка в теме Notable прозрачным (чтобы страница отображалась корректно).

V Дублирующая страница

33) Создаете второе сообщение в блоге со вторым видео и другим текстом. Связываете эти видео ссылками "читать дальше" и "назад". Ссылки можно разместить сразу после тега кнопки.

Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevdesign3.blogspot.com/2019/02/blog-post.html

Ссылки на выполненное задание принимаются в комментариях к этому посту до 20:00 10 марта.