#10 Вставка відео та аудіо
Для того, щоб відповісти на питання як розмістити мультимедійні файли на сторінці html треба з'ясувати а де цы файли знаходяться. Відеофайл, наприклад може бути поряд з html файлом на комп'ютері, а може знаходитись на You Tube і треба розмістити на сайті лише посилання на нього з можливістю прев'ю.
Отже варто розглянути обиджва варіанта по черзі
1. Формати відео файлів які підтримує web
Перед тим як додавати до сайту відеофайл треба розуміти, що не всі формати відео Підтримує html.
Формати відео, що підтримує html 5.0
| формат відео | Тип |
|---|---|
| mpeg4, mp4 | video/mp4 |
| OGG, OGA, OGV | video/ogg |
| WEBM WAV | video/webm |
Якщо потрібний відеофайл має формат який не підтримує web, то його треба сконвертувати спеціальною програмою, наприклад format factory
2.Контейнер video
Якщо підготовлений файл відповідає вимогам web, його можна додавати до html документу застосувавши контейнер <video> та тег <source>
Розглянемо приклад в якому файл sss.mp4 додається до веб сторінки.
<source src = "sss.mp4" type = "video/mp4">
</video>
Атрибути video:
- width = "200" height = "320" Розмір вікна в якому відображається відеофайл.
- controls включає панель керування відео (кнопки stop/play, керування звуком, повний екран)
- muted відео стартує з вимкненим звуком.
- autoplay кнопка play вмикається автоматично. У багатьох браузерах цей атрибут працює тільки в парі з muted
Тег <source> відповідає за завантаження відеофайла вказаного в атрибуті src з типом файла вказаного в атрибуті type.
3. Аудіофайли та тег audio
Файли аудіо також не всі підходять для додавання на веб сторіку. Ось перелік форматів аудіо, що підтримує html 5.0
| формат відео | Тип |
|---|---|
| mp3 | audio/mpeg |
| OGG | audio/ogg |
| WAV | audio/wav |
Для додавання файлів використовують теги audio та source.
<source src = "lesson10.mp3" type = "audio/mp3">
</audio>
4.Відображення відео за посиланням на You Tube у віконці iframe
Якщо необхідно відобразити відео з You Tube у вікні вашої web сторінки, то для цього існує контейнер iframe.
iframe можна розглядати як віконце у вікні браузера, або навіть кватирку. Розміри і посилання на вміст iframe задаються у відповідних атрибутах with, height, src.
Для того, щоб правильно обрати посилання на відео яке ви преглядаєте треба натиснути на кнопку ПОДІЛИТИСЯ і у відкрившмуся вікні натиснути кнопку КОПІЮВАТИ:
Розглянемо приклад додавання iframe з посиланням на you tube:
</iframe>
Можливо багатьом, як і мені, не дуже подобається рамка навколо віконця. Для того, щоб прибрати її додайте до iframe атрибут frameborder = 0 .
Виконайте вправу 1
Створити html сторінку з двома заголовками: "Відео з файлу", "Відео з You tube". Під кожним загогловком розмістити відео з файлу та з You tube відповідно. mp4 можна зняти смартфоном.
Виконайте вправу 2
Виконайте завдання від Оксани Пасічник за посиланням https://dystosvita.org.ua/mod/assign/view.php?id=1193. Для виконання цієї вправи достатньо зайти як гість