На одному з сайтів клієнта знадобилося додати відео на сторінку. Начебто завдання не складна, завантажили відео на youtube, скопіювали код для розміщення на своєму сайті, все працює, все красиво, але от під час перегляду спливає реклама, яка дуже не потрібна в даному випадку. Почали шукати інші відео-ресурси, на яких можна розмістити своє відео, виявилося, що у всіх показується реклама під час перегляду відео. Тоді прийняли рішення розмістити відео на своєму хостингу і вивести його на сторінці за допомогою тега <video>.
Найпростіший спосіб вивести відео на сторінці це прописати такий код:
<Video id = "movie" width = "865" height = "385" src = "video / demidov-park-promo.mp4" poster = "images / screenshot.jpg" controls = "controls" preload = "auto"> </ video>де вказано
- id - ідентифікатор для тега, розміри відео (ширина, висота),
- src - шлях до відеофайлу, poster - картинка, яка буде заставкою для вікна відео,
- controls - підключення вбудованої в браузер панелі управління для відео (у кожного браузера свої елементи управління),
- preload - можливість почати завантаження відео відразу при при відкритті сторінки, що дозволить запустити відео без затримок на завантаження, яка при стандартних налаштуваннях почнеться тільки після натискання кнопки Play.
З усіх цих параметрів обов'язковим є тільки src - шлях до файлу відео, інші за бажанням. Більш докладно про тег <video> можна прочитати тут .
Але під час розміщення відео зіткнулися з деякими проблемами, тому як різні браузери підтримують різні кодеки і тому не всі відтворюють відео в форматі .mp4. Довелося шукати програми для конвертації відео в потрібні формати, допомогли ці програми:
DVDVideoSoft Free Studio - програма для конвертації відео в формат .ogv
FreeWebMVideoConverter - програма для конвертації відео в формат .webm
І на сайті розмістили за підсумком такої код для виведення відео:
<Video id = "movie" width = "865" height = "385" poster = "images / screenshot.jpg" controls = "controls" preload = "auto"> <source src = "video / demidov-park-promo. mp4 "type = 'video / mp4; codecs = "avc1.42E01E, mp4a.40.2" '/> <source src = "video / demidov-park-promo.webm" type =' video / webm; codecs = "vp8, vorbis" '/> <source src = "video / demidov-park-promo.ogv" type =' video / ogg; codecs = "theora, vorbis" '/> <object id = "videoplayer55" type = "application / x-shockwave-flash" data = "video / uppod.swf" width = "865" height = "385"> <param name = "bgcolor" value = "# ffffff" /> <param name = "allowFullScreen" value = "true" /> <param name = "allowScriptAccess" value = "always" /> <param name = "movie" value = "video / uppod.swf" /> <param name = "flashvars" value = "comment = video_flv & amp; m = video & amp; file = demidov-park-promo.mp4" /> </ object> </ video>Завдяки такому коду відео буде відтворюватися в будь-яких браузерах, а якщо в якихось, і виявиться, тоді спрацює останнє правило і відео відкриється за допомогою flash-програвача.
Можуть виникнути проблеми з MIM-типами. MIM-типи - частина значення атрибута type у тега source. Але додавання атрибута type не є достатнім, ви також повинні переконатися, що ваш веб-сервер включає в HTTP-заголовок Content-Type відповідний MIME-тип.
Якщо ви застосовуєте веб-сервер Apache або його похідні, то можете використовувати директиву AddType в httpd.conf або файлі htaccess розташований в тій директорії, де ви зберігаєте ваші відеофайли. Якщо ви використовуєте інший веб-сервер, зверніться до документації вашого сервера про те, як встановити HTTP-заголовок Content-Type для певних типів файлів.
Додайте в свій файл htaccess в корені сайту такі правила:
AddType video / ogg .ogv AddType video / mp4 .mp4 AddType video / webm .webmПерший рядок призначена для відео в контейнері Ogg. Другий рядок для відео в контейнері MPEG-4. Третя для WebM. Встановіть це один раз і забудьте. Якщо ви не вказали ці директиви, ваше відео може не грати в деяких браузерах, навіть якщо включені MIME-типи в атрибуті type вашого HTML-коду.
Ось так виглядає прогриватель відео в Firefox: 
