Розміщення мультимедійних файлів і настроювання їх програвання
Опанувати веб конспект
Виконати практичне завдання № 1
Пригадати
Атрибут src [source (джерело)] - обов'язковий , який указує абсолютну або відносну url адресу відео
Приклад HTML коду атрибуту src
<video src="video/mov.mp4" ></video> <!--mov. - Назва відео-->
Атрибут controls [керування]-додає панель керування до відео, а її дизайн залежить від браузеру
Приклад HTML коду атрибуту controls
<video src="video/mov.mp4" controls></video> або <video src="video/mov.mp4" controls="controls"></video>
Атрибут autoplay - відповідає за автоматичне відтворення відео при завантаженні веб сторінки
Приклад HTML коду атрибуту autoplay
<video src="video/mov.mp4" controls="controls" autoplay></video>
або <video src="video/mov.mp4" controls="controls" autoplay="autoplay"></video>
Атрибут loop[петля] - зациклює відтворення відео на веб сторінку
Приклад HTML коду атрибуту loop
<video src="video/mov.mp4" controls="controls" autoplay="autoplay" width="30%" loop ></video>
Атрибут poster[плакат] -вказує адресу картинки (GIF, PNG, JPEG), яка відтворюється до завантаження та програвання відео
Приклад HTML коду атрибуту poster
<video src="video/2.mp4" controls="controls" loop poster="img/12.jpg" ></video>
Вбудувати відео з постером у вебсторінку
Відкрийте посилання на вебсторінку, яку створили на попередньому уроці (всім хто виконав завдання, посилання в коментарях викладача повернуто. Хто не виконав завдання попереднього уроку звісно потрібно виконати!)
2. У рядок коду з другим відео , вставити атрибут для прописування постеру для відео 2
<video width="330px" height="250px" src="https://dump.video/i/nGZsAH.mp4" controls></video>
<video width="330px" height="250px" src="https://dump.video/i/nGZsAH.mp4" controls loop poster="img/12.jpg"></video>
На місце локальної адреси картинки - постера (виділена червоним кольором), поставити URL адресу фото або малюнка з собакою на ваш смак)
Результат виконання практичного завдання: ліворуч - відео без постера; праворуч - відео з постером (картинкой - рекламой)
3.Натиснути RUN, щоб переглянути результат у області перегляду та Save, щоб згенерувати URL адресу сторінки з відео, та постером. Прозвітувати посиланням