JWPlayer и свой YouTube

Опубликовано admin - пт, 01/28/2011 - 20:18

Здравствуйте уважаемые читатели! Многие пользователи, веб-разработчики использовали разные средства для встраивания видео в личный блог, сторонние продукты, плееры, некоторые, наверно, платно. Я же советую использовать разработки с сайта www.longtailvideo.com, а именно библиотеку, на которой построен JWPlayer.

Оглавление статьи!

  1. Где скачать JWPalyer
  2. Объект playlist
  3. Объект levels
  4. Объект events
  5. Функции и переменные JWPlayer
  6. Живой пример
  7. Загрузить плеер

Почему именно 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":

Loading the player ...
 
 
 

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время. читать...

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

читать...
На разработку сайта! Скидки до 20%!