Slyweb
На разработку сайта! Скидки 50%!

JWPlayer и свой YouTube

Здравствуйте уважаемые читатели! Многие пользователи, веб-разработчики использовали разные средства для встраивания видео в личный блог, сторонние продукты, плееры, некоторые, наверно, платно. Я же советую использовать разработки с сайта 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. Для начала подключите основной файл:

  1.<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>

После того как мы подключили javascript библиотеку нужно создать контейнер для плеера и указать javascript объект, содержащий настройки плеера:

  1.<div id="container">Loading the player ...</div>
  2.<script type="text/javascript">
  3.jwplayer("container").setup({
  4.flashplayer: "/jwplayer/player.swf",
  5.file: "/uploads/video.mp4",
  6.height: 270,
  7.width: 480
  8.});
  9.</script>
10.

Во время загрузки видео контейнер будет отображать текст Loading the player ..., вы можете заменить его любым loader`ом, по умолчанию плеер пытается загрузить видео во flash плеере, если flash недоступен, будет использован HTML5. В вышеуказанном примере есть опции плеера, подробная характеристика которых будет дана ниже. Так же в качестве альтернативы Вы можете использовать тег video:

  1.<video
  2.src="/uploads/video.mp4"
  3.height="270"
  4.id="container"
  5.poster="/uploads/image.jpg"
  6.width="480">
  7.</video>
  8.<script type="text/javascript">
  9.jwplayer("container").setup({
10.flashplayer: "/jwplayer/player.swf"
11.});
12.</script>
13.

Самый простой способ вставки видео на ваш сайт, блог - указать всего две строки кода:

  1.<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
  2.<video class="jwplayer" src="/uploads/video.mp4" poster="/uploads/image.jpg"></video>
  3.

Параметры плеера настраиваются с помощью setup():

  1.<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
  2.<video class="jwplayer" src="/uploads/video.mp4" poster="/uploads/image.jpg"></video>
  3.

Метод setup может иметь несколько вложенных объектов:

  • playlist - плейлист(список проигрывания по-русски) с метаданными;
  • levels - качество проигрывания видео;
  • plugins - плагины плеера, например галерея видео роликов располагающаяся внизу и тд.
  • events – события, при запуске которых могут срабатывать соответствующие функции.
  • players - смена порядка загрузки браузера, например вместо привычного - первым flash плеер, вторым HTML5, Вы можете поменять данный порядок.

Конечно, трудно сразу уяснить о чём идёт речь, поэтому поясню на примере:

  1.<div id="container">Loading the player...</div>
  2.<script type="text/javascript">
  3.jwplayer("container").setup({
  4.flashplayer: "/jwplayer/player.swf",
  5.playlist: [
  6. { duration: 32, file: "/uploads/video.mp4", image: "/uploads/video.jpg" },
  7. { duration: 124, file: "/uploads/bbb.mp4", image: "/uploads/bbb.jpg" },
  8. { duration: 542, file: "/uploads/ed.mp4", image: "/uploads/ed.jpg" }
  9. ],
10."playlist.position": "right",
11."playlist.size": 360,
12.height: 270,
13.width: 720
14.});
15.</script>
16.

В вышеуказанном случае будет использован элемент с 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 позволяет использовать множественные уровни качества записи видео. Пример в котором указаны три уровня качества записи видео, которые пользователь способен выбрать.

  1.<div id="container">Loading the player...</div>
  2.<script type="text/javascript">
  3.jwplayer("container").setup({
  4.flashplayer: "/jwplayer/player.swf",
  5.height: 270,
  6.width: 480,
  7.image: "/uploads/video.jpg",
  8.levels: [
  9.{ bitrate: 300, file: "assets/bbb_300k.mp4", width: 320 },
10.{ bitrate: 600, file: "assets/bbb_600k.mp4", width: 480 },
11.{ bitrate: 900, file: "assets/bbb_900k.mp4", width: 720 }
12.],
13.provider: "rtmp",
14.streamer: "rtmp://mycdn.com/application/"
15.});
16.</script>
17.

Объект Plugins

Объект Plugins подключает плагины. Пример указан ниже:

  1.<div id="container">Loading the player...</div>
  2.<script type="text/javascript">
  3.jwplayer("container").setup({
  4.flashplayer: "/jwplayer/player.swf",
  5.playlist: [
  6. { file: "/uploads/bbb.mp4", "sharing.link": "http://bigbuckbunny.org" },
  7. { file: "/uploads/ed.mp4", "sharing.link": "http://orange.blender.org" }
  8. ],
  9. plugins: {
10.sharing: { link: true }
11.},
12.height: 270,
13.width: 720
14.});
15.</script>
16.

Объект 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(), что приведёт к запуску проигрывания медиафайла.

  1.<div id="container">Loading the player ...</div>
  2.<script type="text/javascript">
  3.jwplayer("container").setup({
  4.flashplayer: "jwplayer/player.swf",
  5.file: "jwplayer/dis.mp4",
  6.height: 270,
  7.width: 480,
  8.skin: "jwplayer/glow.zip",
  9.image: "jwplayer/1.jpg",
10.events: {
11. onReady: function(){
12. jwplayer("container").play();
13. }
14.}
15.});
16.</script>
17.

Функции и переменные JWPlayer

JWPlayer поддерживает несколько функций, которые могут быть вызваны:

  • setFullscreen(state): переход в полноэкранный режим.
  • setMute(state): отключение звука. Пример:
  •   1. jwplayer("container").setMute();
  • load(playlist): загружает список элементов воспроизведения. Им может быть:
    • Массив:
        1.[
        2.{ duration: 32, file: "/uploads/video.mp4", image: "/uploads/video.jpg" },
        3.{ title: "cool video", file: "/uploads/bbb.mp4" },
        4.{ duration: 542, file: "/uploads/ed.mp4", start: 129 }
        5.]
        6.
    • Объект:
        1.{ duration: 32, file: "/uploads/video.mp4", image: "/uploads/video.jpg" },
        2.
    • файл 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.

Проиллюстрируем, как необходимо запускать данные функции:

  1.jwplayer("container").play(); // воспроизвести
  2.jwplayer("container").stop(); // остановить
  3.
  4.//для возможности перемещаться по плейлисту необходимо,
  5.//чтобы ваш плеер поддерживал соответсвующие кнопки или
  6.//необходимо создавать элементы управления и привязывать к ним события
  7.//для работы плейлитста
  8.<script type="text/javascript">
  9.jwplayer("container").setup({
10.flashplayer: "jwplayer/player.swf",
11.height: 270,
12.width: 480,
13.skin: "jwplayer/glow.zip",
14.events :{
15. onReady: function(){
16. playlist = [
17.{ duration: 32, file: "jwplayer/video.mp4", image: "jwplayer/1.jpg" },
18.{ title: "cool video", file: "jwplayer/bbb.mp4" },
19.{ duration: 542, file: "jwplayer/dis.mp4", start: 129 }
20.]
21.
22.jwplayer("container").load(playlist);
23. }
24.}
25.});
26.</script>
27.

Почти все методы запускающие функции плеера имеют противоположные аналоги функций, то есть методы с помощью которых не устанавливаются функции, а получается значение например getHeight(), getState() и т.д. Подробно они описываются на сайте www.longtailvideo.com/

Живой пример

По сложившейся традиции приведем пример практического применения плеера "JWPlayer":

  1.<style type="text/css">
  2.#big {
  3.clear:both;
  4.width:100%;
  5.}
  6.#container {
  7.float:left;
  8. height: 270px;
  9. width: 480px;
10. margin: 10px auto 30px;
11. position: relative;
12. background: #000;
13. border-radius: 10px;
14. -moz-border-radius: 10px;
15. -webkit-border-radius: 10px;
16. border: 1px solid #333;
17. box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
18. -moz-box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
19. -webkit-box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
20.}
21.#playlist {
22. height: 270px;
23. width: 120px;
24. margin: 10px 10px 30px;
25.float:left;
26. background: #000;
27. border-radius: 10px;
28. -moz-border-radius: 10px;
29. -webkit-border-radius: 10px;
30. border: 1px solid #333;
31. box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
32. -moz-box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
33. -webkit-box-shadow: 0 2px 10px #333, inset 0 1px 0 #707478;
34.}
35.#firstvideo,#secondvideo {
36.cursor:pointer;
37.background:url(jwplayer/eye.jpg);
38.height:100px;
39.width:100px;
40.margin:10px auto;
41.}
42.#secondvideo{
43.background:url(jwplayer/bunny.jpg);
44.}
45.</style>
46.
47.<div id="container">Loading the player ...</div>
48.<div id="playlist" style="">
49.<div id="firstvideo" ></div>
50.<div id="secondvideo" ></div>
51.
52.</div>
53.
54.<script type="text/javascript">
55.jwplayer("container").setup({
56.flashplayer: "jwplayer/player.swf",
57.height: 270,
58.width: 480,
59.skin: "jwplayer/glow.zip",
60.file: "jwplayer/dis.mp4",
61.image: "jwplayer/1.jpg"
62.});
63.
64.$(document).ready(function(){
65.$("#firstvideo").click(function(){
66.playlist = { file: "jwplayer/dis.mp4", image: "jwplayer/1.jpg" }
67.jwplayer("container").load(playlist).play();
68.});
69.$("#secondvideo").click(function(){
70.playlist = { file: "jwplayer/bunny.mp4", image: "jwplayer/posterb.jpg" }
71.jwplayer("container").load(playlist).play();
72.});
73.});
74.</script>
75.<div id="big"></div>
Loading the player ...

Загрузить плеер

Весь архив для работы с JWPlayer - JWPlayer.zip.

Всё уже настроено. Весь архив для работы с JWPlayer - primer-video.zip.


Александр Ермаков