Здравствуйте уважаемые читатели! Многие пользователи, веб-разработчики использовали разные средства для встраивания видео в личный блог, сторонние продукты, плееры, некоторые, наверно, платно. Я же советую использовать разработки с сайта www.longtailvideo.com, а именно библиотеку, на которой построен JWPlayer.
Оглавление статьи!
- Где скачать JWPalyer
- Объект playlist
- Объект levels
- Объект events
- Функции и переменные JWPlayer
- Живой пример
- Загрузить плеер
Почему именно JWPlayer!
Плеер JWPlayer включает множество полезных функций и методов для работы с видео, особенно для разработчиков, избавляя последних от надобности создавать собственные методы. К тому же JWPlayer условно платный, то есть стандартные возможности бесплатно, дополнительные (подключение платных плагинов, использование на коммерческих сайтах) - платно. Что относится к стандартным возможностям:
- трансляции видео в форматах AVI Mpeg4 video,FLV, H.264 (.mp4,.mov,.f4v),3GPP (.3gp,.3g2),AAC(.aac,.m4a), MP3, YouTube,OGG Theora Video,AVI Microsoft mpeg4;
- смена тем плеера;
- установка свободных плагинов с сайта.
- использование списков воспроизведения в формате RSS, ATOM.
- поддержка встроенных событий, функций их обработки, получения состояния загрузки видео и т.д.
Ещё одной причиной по которой я советую использовать плеер JWPlayer - к нему существует подробная инструкция, но на английском, основы которой я укажу в этой статье.
Где скачать JWPalyer
Скачать плеер вы можете с официального сайта - www.longtailvideo.com/ или архивом с данной страницы (JWPlayer.zip). Для установки и использования JWPalyer нам понадобятся три файла - jwplayer.js, player.swf и yt.swf. Для начала подключите основной файл:
После того как мы подключили javascript библиотеку нужно создать контейнер для плеера и указать javascript объект, содержащий настройки плеера:
Во время загрузки видео контейнер будет отображать текст Loading the player ..., вы можете заменить его любым loader`ом, по умолчанию плеер пытается загрузить видео во flash плеере, если flash недоступен, будет использован HTML5. В вышеуказанном примере есть опции плеера, подробная характеристика которых будет дана ниже. Так же в качестве альтернативы Вы можете использовать тег video:
Самый простой способ вставки видео на ваш сайт, блог - указать всего две строки кода:
Параметры плеера настраиваются с помощью setup():
Метод setup может иметь несколько вложенных объектов:
- playlist - плейлист(список проигрывания по-русски) с метаданными;
- levels - качество проигрывания видео;
- plugins - плагины плеера, например галерея видео роликов располагающаяся внизу и тд.
- events – события, при запуске которых могут срабатывать соответствующие функции.
- players - смена порядка загрузки браузера, например вместо привычного - первым flash плеер, вторым HTML5, Вы можете поменять данный порядок.
Конечно, трудно сразу уяснить о чём идёт речь, поэтому поясню на примере:
В вышеуказанном случае будет использован элемент с id container, в него будет загружен flash плеер, находящийся по адресу /jwplayer/player.swf. Будет создан список воспроизведения, в котором первым следует - video.mp4, вторым - bbb.mp4, третьим - ed.mp4, при этом плейлист будет находится с правой стороны, его размер 360px. Далее указаны соответственно размеры плеера 720 и 270. Давайте подробнее разберём объект playlist.
Объект playlist
Для того чтобы от объекта playlist была польза ваш плеер должен поддерживать кнопки пермещения вперед и назад, либо Вы должны создать элементы и привязать к ним события для пермещения по элементам списка вопроизведения.
Для объекта playlist допускаются следующие параметры:
- file - данный параметр обязателен, он содержит путь к файлу видео;
- image - адресс постера(изоюражение которое будет заставкой до момента начала воспроизведения и после окончания воспроизведения);
- duration - продолжительность в секундах.
- start - начальная точка воспроизведения видео.
- title - заголовок элемента списка воспроизведения.
- description - заголовок элемента списка воспроизведения.
- streamer - тип потока видео.
- provider - интерфейс определенного сервиса.
- levels - несколько уровней качества воспроизведения.
Объект levels
Объект levels позволяет использовать множественные уровни качества записи видео. Пример в котором указаны три уровня качества записи видео, которые пользователь способен выбрать.
Объект Plugins
Объект Plugins подключает плагины. Пример указан ниже:
Объект Events
Объект Events позволяет запускать функции обработчики для следующих типов событий:
- onBufferChange(callback) - срабатывает когда загружаемый в буфер медиа файл превышает определённый процент или определенное время, указанное в секундах. Атрибут события - percent(проценты);
- onBufferFull(callback) - срабатывает при превышении размера буфера, по умолчанию установленного как 1 секунда;
- onError(callback) - срабатывает при возникновении ошибки в плеере, дополнительный атрибут - message, содержит сообщение об ошибке.
- onFullscreen(callback) - срабатывает при развёртывании плеера в полноэкранный режим. Дополнительный атрибут - fullscreen, содержит true или false, в зависимости от того развёрнут ли плеер на весь экран или нет.
- onMetadata(callback) - срабатывает при нахождении метаданных в плеере, дополнительный атрибут - data, содержит метаданные.
- onMute(callback) - срабатывает при включении, отключении звука, дополнительный логический атрибут - mute.
- onPlaylist(callback) - срабатывает при загрузке нового списка проигрывания, атрибуты - playlist - массив данных.
- onPlaylistItem(callback) - срабатывает при переходе к новому элементу списка, дополнительный атрибут index - основанный на нуле индекс элемента списка воспроизведения(0 - первый в списке элемент).
- onReady(callback) - срабатывает при успешно загрузке плеера.
- onResize(callback) - срабатывает при изменении размеров плеера, дополнительные атрибуты width, height - содержат новые значения высоты и ширины.
- onPlay(callback) - срабатывает при начале воспроизведения видео, дополнительный атрибут oldstate (содержит информацию об остановке или процессе буферизации видео).
- onPause(callback) - срабатывает при остановке воспроизведения, атрибут oldstate может содержать одно из двух значений - PLAYING или BUFFERING.
- onBuffer(callback) - срабатывает при буферизации данных. Атрибут oldstate может содержать одно из трех значений - PLAYING, PAUSED или IDLE
- onIdle(callback) - срабатывает при появлении состояния. Атрибут oldstate может содержать одно из трех значений - PLAYING, PAUSED или BUFFERING
- onComplete(callback) - срабатывает при окончании проигрывания.
- onTime(callback) - срабатывает при перемещении ползунка проигрывания. Дополнительные атрибуты:
- duration(число): значение в секундах.
- offset(число): значение небуферизованных данных.
- position(число): число, обозначающее количество прошедших секунд.
- onVolume(callback) - срабатывает при изменении громкости. Атрибут volume может содержать значение от 0 до 100
Например, в нижеуказанном примере при полной загрузке плеера будет выполнена функция play(), что приведёт к запуску проигрывания медиафайла.
Функции и переменные JWPlayer
JWPlayer поддерживает несколько функций, которые могут быть вызваны:
- setFullscreen(state): переход в полноэкранный режим.
- setMute(state): отключение звука. Пример:
load(playlist): загружает список элементов воспроизведения. Им может быть:
объект:
<p><textarea class="code" rel="javascript">
{ duration: 32, file: "/uploads/video.mp4", image: "/uploads/video.jpg" },
</textarea></p>
файл xml playlistItem(index): функция позволяет переключаться к элементам списка воспроизведения (0 - первый элемент списка). playlistNext(): переход к следующему в списке элементу воспроизведения. playlistPrev(): переход к предыдущему в списке элементу воспроизведения. resize(width, height): изменнеие размеров плеера по заданным размерам. play(state): запуск воспроизведения. play(state): запуск воспроизведения. Дополнительный логический параметр - state, возвращает true или false pause(state): пауза воспроизведения. Дополнительный логический параметр - state, возвращает true или false stop(state): остановка воспроизведения. Дополнительный логический параметр - state, возвращает true или false seek(position): перемещение ползунка воспроизведения. Дополнительный параметр - position, значение времени воспроизведения в секундах; setVolume(volume): громкость. Дополнительный параметр - volume, значение громкости воспроизведения от 0 до 100. Проиллюстрируем, как необходимо запускать данные функции:
Почти все методы запускающие функции плеера имеют противоположные аналоги функций, то есть методы с помощью которых не устанавливаются функции, а получается значение например getHeight(), getState() и т.д. Подробно они описываются на сайте www.longtailvideo.com/
Живой пример
По сложившейся традиции приведем пример практического применения плеера "JWPlayer":
694 просмотра
Взаимосвязанные материалы
Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.
На сегодняшний день slyweb.ru представляет следующие услуги:
читать...Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время.
читать...Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?".
читать...Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель.
читать...Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.
Плеер будет поддерживать следующие функции:
читать...