Завдання та теорія для 10-х класів на 05 квітня 2021 р.
Додавання відео на Веб-сторінку.
HTML тег <video> додає, відтворює та керує відеороликом на веб-сторінці. Тег повинен "закриватися"...
Шлях до файлу задається через атрибут src або вкладений елемент <source>.
Існує три формати відео, що підтимуються елементом <video>: MP4, WebM та Ogg.
HTML тег <video> додає, відтворює та керує відеороликом на веб-сторінці. Тег повинен "закриватися"...
Шлях до файлу задається через атрибут src або вкладений елемент <source>.
Існує три формати відео, що підтимуються елементом <video>: MP4, WebM та Ogg.
Кодеки і браузери
<head>
<meta charset="utf-8">
<title>Video</title>
</head>
<body>
<video width="960" height="540" controls="controls" poster="MM.jpg">
<source src="MMS.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
Тег «Video» не підтримується вашим браузером.
<a href="MMS.mp4">Завантажити відео</a>.
</video>
</body>
</html>
| Браузер | Internet Explorer | Chrome | Opera | Safari | Firefox |
| Аудіо кодеки | |||||
|---|---|---|---|---|---|
| ogg/vorbis | Ні | Так | Так | Ні | Так |
| wav | Ні | Ні | Так | Так | Так |
| mp3 | Так | Так | Ні | Так | Ні |
| AAC | Так | Так | Ні | Так | Ні |
| Відео кодеки | |||||
| ogg/theora | Ні | 4 | 11.5 | Ні | 3.5 |
| H.264 | 9 | 4 | 25 | 3.2 | 21 |
| WebM | Ні | 6 | 11.5 | Ні | 4 |
Синтаксис
<video>
<source
src="URL">
</video>
Атрибути
autoplay Відео починає
відтворюватися
автоматично після
завантаження сторінки.
controls Додає
панель керування відтворення відео.
height Задає
висоту області для відтворення
відеоролика.
loop Повторює
відтворення відео
з початку після його
завершення.
poster Адреса
малюнка, який буде
відтворюватись, поки відео не
доступне.
preload Використовується
для завантаження відео
разом з
завантаженням веб-сторінки.
src Вказує
шлях до відеоролика.
width Задає ширину області для відтворення
відеоролика.
Приклад
<html><head>
<meta charset="utf-8">
<title>Video</title>
</head>
<body>
<video width="960" height="540" controls="controls" poster="MM.jpg">
<source src="MMS.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
Тег «Video» не підтримується вашим браузером.
<a href="MMS.mp4">Завантажити відео</a>.
</video>
</body>
</html>
Важливо!
В прикладі файли відео та малюнка знаходяться в кореневому каталозі.ЗАВДАННЯ
В текстовому редакторі створіть HTML-файл за прикладом. Додайте своє авторське фото та відео. Довжина відео не повинна перевищувати 3 хвилини. Спробуйте змінювати атрибути. Як це вплине на відображення відео на сторінці?
Комментарии
Отправить комментарий