Видеоплеер для сайта
Многие владельцы веб-сайтов хотят как можно больше оживить свой сайт, сделать его супер информативным. Одним из вариантов того, как сделать сайт интереснее есть размещение видео на сайте.
Вставка видеоплеера на сайт
Существует множество видео-форматов, а так же множество способов его воспроизведения. У меня не раз возникала задача встраивания видеоплеера на сайт.
Иногда нужно просто вставить на сайт видео с youtube, иногда воспроизвести обычную видеозапись. Но бывают задачи и по сложнее.
Например, трансляция ip камеры или плейлиста в формате .asx. Я перепробовал немало всевозможных вариантов видеоплееров для сайта, но все-же решил остановиться на JW Player.
JW Player использует технологии FLASH и HTML5 и поддерживает различные аудио и видео-форматы.
Описание JW Player:
- Поддержка технологий FLASH и HTML5, что позволяет встраивать плеер для воспроизведения на разных устройствах.
- Простая модель скинов, которая позволяет настроить видеоплеера для сайта.
- Гибкий JavaScript API
- Поддержка флэш и JavaScript модулей.
- Поддержка потокового видео протокола RTMP и HTTP псевдо-потока.
Поддержки браузеров и устройств
Кроме этих приятных новостей, есть и еще: посмотрите на таблицу поддержки браузеров
| Браузеры | Flash | HTML5 |
| Chrome | + | + |
| Firefox | + | 3,5+ |
| IE | + | 9.0+ |
| Opera | + | + |
| Safari | + | + |
| Устройства | Flash | HTML5 |
| iPhone / iPad | - | + |
| Android | 2.2+ | 2.1+ |
Поддержка аудио и видео форматов
Данный плеер поддерживает такие форматы файлов:
- FLV/F4V
- H.264/MP4
- MP3
- AAC
Установка видеоплеера JW Player на сайт
Для начала необходимо скачать необходимые файлы с официального сайта(ссылка выше), распаковать их в папку "jwplayer". Следует обратить внимание на два файла:
- player.swf - Flash плеер
- jwplayer.js - встраиваемая библиотека JavaScript
Сам фидео-файл размещаете в папку "videos". Например, назовем фидео-файл video.mp4. После этого встраиваем следующий код на страницу
< script type='text/javascript' src='/jwplayer/jwplayer.js'>
< script type='text/javascript'>
jwplayer('player').setup({
'flashplayer': '/jwplayer/player.swf',
'width': '400',
'height': '300',
'file': '/videos/video.mp4'
});
Следите за путями к файлам jwplayer.js, player.swf и video.mp4! Если вы используете другое расположение, то замените пути к этим файлам.