JWPlayer и свой YouTube

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

  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.
	

  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 допускаются следующие параметры:

• file - данный параметр обязателен, он содержит путь к файлу видео;
• image - адресс постера(изоюражение которое будет заставкой до момента начала воспроизведения и после окончания воспроизведения);
• duration - продолжительность в секундах.
• start - начальная точка воспроизведения видео.
• title - заголовок элемента списка воспроизведения.
• description - заголовок элемента списка воспроизведения.
• streamer - тип потока видео.
• provider - интерфейс определенного сервиса.
• 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 подключает плагины. Пример указан ниже:

  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 позволяет запускать функции обработчики для следующих типов событий:

• 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 поддерживает несколько функций, которые могут быть вызваны:

• 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>

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

1	+0 пользователь Супер, мало где найдёшь! Комментарий добавлен: 03 Февраля 2011 00:48:00 ответить

2	+1 Artem Спасибо!!Всё подробно описано,а плеер действительно достойный, собираюсь использовать его для просмотра RTMP потока у себя на сайте!! Комментарий добавлен: 05 Февраля 2012 22:17:39 ответить

Имя (обязателено)*

Email (gravatar.com)

Сайт

Комментарий (обязателен)*

Добавить комментарий