Як відображати потокове відео з допомогою HTML5

Як використовувати HTML5, для програвання різних стриминговых відео файлів.

Введення
У цій статті я розповім і покажу як зробити живу відео трансляцію на вашому сайті. Нещодавно мене найняли з метою реалізувати даний функціонал для клієнта. Я порадив реалізувати це за допомогою HTML5 для mp4 відео форматів і flash для його .flv файлів.

Основи
Тим хто хоче реалізувати стрімінг відео для початку потрібно ознайомитися з тим, які є відео формати і що може, а що не може бути відтворений. Існує велика кількість відео форматів, таких як: .flv, .mp4, .swf та інші. Розглянемо .flv .swf, які є файлами формату flash. Ці два формати не можуть бути відтворені з допомогою HTML5. Навпаки MP4 може програватися з допомогою HTML5 без flash плеєра.

Ви можете знайти багато статтею і туториалов в мережі на тему стрімінг .swf і .flv файлів. Зверніть увагу на те що .swf плеєр не буде відтворювати .flv файли. Вони обидва flash але з різними вимогами. У мережі багато суперечливої інформації на цей рахунок. Ви лише витратите свій час намагаючись змусити .swf запустить .flv але в підсумку упевнитесь що це неможливо.

Як реалізувати .mp4 в HTML5:
<video id="player" width="100%" height="авто" autoplay="autoplay" controls>
<source src="Name of your file" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2">
</video>

Кілька речей, які варто запам'ятати:

  • Відео потрібно присвоїти id
  • Потрібно додати розширення файлу в source.
  • Якщо ви хочете відкрити для користувача доступ до панелі керування тоді додайте тег controls.
  • Потрібно розмістити повний URL файлу в source. Приклад: www.mysite.com/video/myvideo.mp4
HTML5 відтворює аудіо і відео. Вам просто потрібно вказати тип файлу.

Є цікавий момент, коли мова йде про відтворення відео в повноекранному режимі. За замовчуванням, більшість браузерів відключають цю функцію, але ви можете обійти це, вставивши наступний JavaScript код:

< script type='text/javascript'> 
var elem = document.getElementById('player');
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} ;
</script>

Причиною того, що відео не працює на сайті може бути відсутність доступу до сервера, некоректне ім'я файлу, не повний вихідний URL або просто Apache (якщо ви використовуєте його), не розпізнає тип розширення або тип mime.

Налаштування Apache Web Server
Вам потрібно додати mime типи розширення, або у файл apache.conf або в mime.conf. Після внесення змінений перезапустіть сервер.

От і все. Після цього у вас з'явиться можливість транслюватися відео з сайту. Але пам'ятайте, існують обмеження на формати в HTML5, це можуть бути .swf або shockwave flash або .flv.

Як реалізувати стрімінг з flash
У мережі багато різної інформації, де більша частина буде про реалізацію відтворення .swf або Shockwave flash формат, використовуючи щось на зразок SWFObject. Коротенько, SWFObject це JavaScript бібліотека, яка дозволить вам програвати тільки .swf формати і більше вона нічого не робить.

Щоб реалізувати трансляцію .swf файлів потрібно:

1. Завантажити SWFObject з Git або з інших джерел.

2. Розмістити його на сторінку:

< script type="text/javascript" src="../swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
</script>


Цей код повинен бути розміщений в шапці файлу.

3. Ви можете реалізувати його за допомогою тега Object tag або:

< script type="text/javascript">
swfobject.embedSWF("YourContentLocation.swf", "myContent", "300", "120", "9.0.0");
</script>


4. Тепер вам потрібно прописати наступне:

<body>
<div id="myContent">
<p>Alternative content</p>
</div>
</body>


5. Це запустить .swf файл на вашій сторінці. Ви можете керувати багатьма параметрами за допомогою наступного коду:

var params = {
allowScriptAccess: "sameDomain",
allowFullScreen: "true",
wmode: "opaque",
quality: "high",
menu: "false"
};

FlowPlayer
Якщо у вас є багато відео, які зроблені з використанням flash і вони у форматі .flv, то вам необхідно створити flash плеєр. Є багато відео-плеєрів та послуги, які доступні за різними цінами. Я вибрав FlowPlayer. Він на ринку досить давно і вже обзавівся великим співтовариством.

Є кілька варіантів для реалізації FlowPlayer. FlowPlayer.org має дві версії: флеш-плеєр під назвою Flowplayer flash і HTML5 implementation. Друга має безкоштовний варіант для розробників, в той час як для flash потрібно купити ліцензію.

Flash Flowplayer має необхідні файли для відтворення файлів .flv, в той час як, HTML5 плеєр стандартні формати HTML5 файлів (MP4). Отже, чому варто вибрати версію HTML5? Вона пропонує досить багато речей, з якими можна змусити ваш плеєр робити речі без самостійного програмування. Все залежить від ваших потреб.

Деякі вбудовують плеєр на сайт в той час як хостинг відео знаходиться в іншому місці. Ми вмонтуємо відео плеєр у наш сайт і розмістимо файли локально. Для цього потрібно:

1. Переконатися, що такі файли завантажені:

  • flowerplayer-3.2.x.min.js -> є більш пізні версії, так що вам потрібно буде завантажити останню, якщо це не спрацює повернутися до .12/.13
  • flowplayer-controls-3.2.15.swf
  • flowplayer-3.2.16.swf
2. В шапку HTML потрібно додати наступне:

< script type='text/javascript' src='../yourdirectory/flowplayer-3.2.12.min.js'></script>
<script type='text/javascript' src='.../yourdirectory/flowpayer.control-3.2.16.swf'></script>


3. У тілі вашої веб-сторінки, вам потрібно встановити плеєр з src файлом:

<a href="<?php echo $FinalName; ?>"
style="display:block;width:525px;height:425px;"
id="player">
</a>

У цьому прикладі я використовував змінну, засновану на вибір користувача з попередньої сторінки.

Переконайтеся, що ви використовуєте повний URL файлу: yourwebsite.com/yourfilelocation/nameofyourfile.flv

Не те, що ви створили файл і ідентифікатор нам потрібно встановити вгору код, який насправді запускає файл.

Ви додали файл і id, тепер потрібно прописати код який запустить файл:

< script language="JavaScript">
flowplayer("player", "../private/flowplayer-3.2.16.swf");
</script>

Підсумок
Після прочитання цієї статті ви повинні мати хороше розуміння ключових елементів, необхідних для роботи mp4 і .flv файлів на вашому сайті. Звичайно, ви можете керувати параметрами і робити інші речі, але метою цієї статті було дати вам, розуміння деталей, при налаштуванні стримминга.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.