В этой статье я объясню и покажу, как сделать видеотрансляцию на своем сайте.
Недавно меня наняли для реализации этой функциональности для клиента.
Я посоветовал реализовать это с помощью HTML5 для видеоформатов mp4 и flash для его файлов .
flv.
Основы
Тем, кто хочет реализовать потоковое видео, сначала необходимо ознакомиться с тем, какие форматы видео доступны, а что можно, а что нельзя воспроизводить.Существует большое количество форматов видео, таких как: .
flv, .
mp4, .
swf и другие.
Давайте посмотрим на .
flv и .
swf, которые представляют собой файлы флэш-формата.
Эти два формата невозможно воспроизвести с помощью HTML5. Напротив, MP4 можно воспроизводить с использованием HTML5 без флеш-плеера.
В Интернете можно найти множество статей и руководств по потоковой передаче файлов .
swf и .
flv. Обратите внимание, что проигрыватель .
swf не воспроизводит файлы .
flv. Они оба флэш-памяти, но с разными требованиями.
В Интернете по этому поводу много противоречивой информации.
Вы просто потратите время, пытаясь заставить .
swf запускать .
flv, но в конце концов обнаружите, что это невозможно.
Как реализовать .
mp4 в HTML5:
Несколько вещей, которые следует запомнить:<video id="player" width="100%" height="auto" autoplay="autoplay" controls> <source src="Name of your file" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"> </video>
- Видео необходимо присвоить идентификатор
- Вам необходимо добавить расширение файла в источник.
- Если вы хотите предоставить пользователю доступ к панели управления, поместите тег управления.
- Вам необходимо поместить полный URL-адрес файла в исходный код. Пример: www.mysite.com/video/myvideo.mp4
Вам просто нужно указать тип файла.
Есть интересный момент, когда речь идет о воспроизведении видео в полноэкранном режиме.
По умолчанию большинство браузеров отключают эту функцию, но вы можете обойти ее, вставив следующий код 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
Вам необходимо добавить типы 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>
Теги: #html5 #HTML
-
Магнитные Записи
19 Oct, 24 -
Шахматный Телепорт
19 Oct, 24 -
Internet Explorer + = Сглаживание
19 Oct, 24 -
Last.fm: Они Не Убивали. И Не Хороните Это.
19 Oct, 24
