Плеер для сайта с поддержкой плейлистов / Working with Playlists

JW Player поддерживает два механизма загрузки плейлистов:
1) Встроенная конфигурация, подключаемая путем установки опций плейлиста через добавление элементов списка воспроизведения прямо в код плеера.
2) Внешний RSS-канал, подключаемый путем включения в опцию плейлиста URL-адреса этого RSS-фида со списком воспроизведения.

JW Player supports two mechanisms for loading playlists:
1) An inline configuration. It is enabled by setting the playlist configuration option to an array of playlist items.
2) An external RSS Feed. It is enabled by setting the playlist configuration option to the URL of an RSS feed.

1. Встроенная конфигурация / An inline configuration

Встроенная конфигурация является более предпочтительной. Она позволяет JW-плееру загружать контент быстрее (нет дополнительного файла для загрузки) и обойти междоменные ограничения.
Вот образец готового плейлиста с правильным отображением элементов его структуры при использовании встроенной конфигурации:
Inline configurations are preferred. They allow JW Player 6 to load content faster (no extra file to load), plus they avoid any crossdomain loading issues.
See or copy example on loading playlists inline as to the structure of playlists in JW Player 6:


<div align="center">
<script type="text/javascript" src="http://jobvideo.ml/jwplayer-6/player/jwplayer.js"></script>
<div id="bottom-Element"></div>
<script type="text/javascript">
jwplayer("bottom-Element").setup({
primary: "html5",
height: 280,
listbar: {
position: 'bottom',
size: 180
},
height: 460,
playlist: [{
image: "http://jobvideo.ml/images/2012/12/ridus.jpg",
sources: [
{ file: "http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4" }
],
title: "Sintel Movie Trailer",
description: "The Durian open movie project presented dy Blender Foundation"
},{
image: "http://jobvideo.ml/images/2012/12/channel-1.jpg",
sources: [
{ file: "http://wizard.domstart.ru/jwplayer-6/mediaplayer-5.9-viral/africa.flv" }
],
title: "Заголовок - Africa Animal - Title",
description: "Короткий ролик с африканским карликовым хищником"
},{
image: "http://jobvideo.ml/images/2012/12/mir-tv.jpg",
sources: [
{ file: "http://wizard.domstart.ru/jwplayer-6/mediaplayer-5.9-viral/video.mp4" }
],
title: "Заголовок - JW player - Title",
description: "The best HTML5/FLASH player in the world from Longtailvideo"
},{
image: "http://jobvideo.ml/images/2013/01/raztv.jpg",
sources: [
{ file: "http://jobvideo.ml/images/Leafs-Cleaning-in-Notre-Dame-area-360p.mp4", label: "360p" },
{ file: "http://jobvideo.ml/images/Leafs-Cleaning-in-Notre-Dame-area.mp4", label: "720p HD" }
],
title: "Заголовок - Leafs Cleaning in Notre Dame area - Title",
description: "Короткий ролик об осенней очистке улиц от листьев в Нотр-Даме"
}]
});
</script>
</div>

Вот еще один пример встроенной в код плеера конфигурации загрузки плейлиста, но здесь плейлист отображается уже не под плеером, а поверх него (последнее возможно пока только в режиме "Flash", но не HTML5):
See or copy and paste another example of loading playlists inline - listbar position 'over' in FLASH mode (no OVER option in HTML5 mode):


<div align="center">
<script type="text/javascript" src="http://jobvideo.ml/jwplayer-6/player/jwplayer.js"></script>
<div id="over-Element"></div>
<script type="text/javascript">
jwplayer("over-Element").setup({
primary: "flash",
height: 280,
listbar: {
position: 'over',
size: 280, 
},
height: 280,
playlist: [{
image: "http://jobvideo.ml/images/2012/12/ridus.jpg",
sources: [
{ file: "http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4" }
],
title: "Sintel Movie Trailer",
description: "The Durian open movie project presented dy Blender Foundation"
},{
image: "http://jobvideo.ml/images/2012/12/channel-1.jpg",
sources: [
{ file: "http://jobvideo.ml/jwplayer-6/mediaplayer-5.9-viral/africa.flv" }
],
title: "Заголовок - Africa Animal - Title",
description: "Короткий ролик с африканским карликовым хищником"
},{
image: "http://jobvideo.ml/images/2012/12/mir-tv.jpg",
sources: [
{ file: "http://jobvideo.ml/jwplayer-6/mediaplayer-5.9-viral/video.mp4" }
],
title: "Заголовок - JW player - Title",
description: "The best HTML5/FLASH player in the world from Longtailvideo"
},{
image: "http://jobvideo.ml/images/2013/01/raztv.jpg",
sources: [
{ file: "http://jobvideo.ml/images/Leafs-Cleaning-in-Notre-Dame-area-360p.mp4", label: "360p" },
{ file: "http://jobvideo.ml/images/Leafs-Cleaning-in-Notre-Dame-area.mp4", label: "720p HD" }
],
title: "Заголовок - Leafs Cleaning in Notre Dame area - Title",
description: "Короткий ролик об осенней очистке улиц от листьев в Нотр-Даме"
}]
});
</script>
</div>

2. Внешний RSS-канал / An external RSS Feed

При подключении списка воспроизведения через RSS-Feed, возникает проблема междоменных ограничений - например, если ваш плеер встроен на сайте www.example.com, а ваш RSS-плейлист загружается с сайта www.othersite.com (или subdomain.example.com). По умолчанию, такая кросс-доменная загрузка не допускается ни одним браузером, будь то Flash-режим, или HTML5. Частично решить эту проблему можно, лишь загрузив в корень сайта с RSS-списком файл crossdomain.xml.
Еще одно ограничение при работе через RSS-фид - неспособность плеера на лету выбрать между режимами Flash и HTML5. JW плеер всегда будет использовать основной режим, которым является HTML5, если браузер компьютера или мобильного устройства поддерживает HTML5 по умолчанию. При использовании фида с потоками HLS, MP4 видео или RTMP, придется установить в качестве первичного варианта Flash, чтобы избежать проблем с воспроизведением (например, в случае браузера Firefox и MP4-файла). И в режиме HTML5 нет поддержки воспроизведения FLV-файлов.
Ниже - пример блока jwplayer().setup(), который конфигурирует плеер на воспроизведение списка RSS-листа, отображаемого справа от видео:

If you have the RSS-Feed choice. A crossdomain loading issue appears if your player is embedded at www.example.com and your RSS feed is loaded from www.othersite.com (or subdomain.example.com). By default, this is not allowed by any browser, in both Flash and HTML5 mode. See an example of crossdomain.xml file to partially avoid the problem.
Another limitation around RSS feeds is that JW Player will not be able to perform on the fly mode selection based upon media formats. JW Player will always use the primary mode, which is HTML5 if the browser/device supports HTML5 by default. If you use a feed with HLS streams, MP4 videos or RTMP streams, you must set the primary option to flash to avoid playback issues (e.g. on Firefox for MP4). And HTML5 mode supports no FLV playback.
Here's an example jwplayer().setup() block that configures a player to load an RSS feed with a listbar that's positioned to the right of the video:


<div align="center">
<script type="text/javascript" src="http://jobvideo.ml/jwplayer-6/player/jwplayer.js"></script>
<div id="rss-Element"></div>
<script type="text/javascript">
jwplayer("rss-Element").setup({
playlist: "http://jobvideo.ml/jwplayer-6/player/pl2.xml",
primary: "flash",
height: 280,
listbar: {
position: 'right',
size: 200, 
},
width: 698
});
</script>
</div>

Note the primary option is set to flash here, because RSS feed contains entries with MP4 videos.


Appendix

       Расширенные HD-функции / Advanced HD-features

Поддержка HD-качества | High quality / low quality Multiple Sources

Многоформатность и возможность смены качества воспроизведения в плеере прекрасно достигаются в режиме встроенной конфигурации загрузки плейлистов. Вот пример с MP4-видео "Leafs Cleaning in Notre Dame area", которое представлено в коде плеера двумя файлами, второй из которых в высоком качестве - HD 720p. (если в строке "primary" режим "html5" заменить на "flesh", то на обычных компьютерах появится значок HD; если не менять, то возможность воспроизведения стоящего первым из двух файла появится у мобильных устройств и поддерживающих html5 браузеров).
The multi-format and multi-quality options of JW Player can be perfectly achieved with an inline configuration of loading playlists. Here is an example with one item (Leafs Cleaning in Notre Dame area) that has an MP4 video in two qualities (HD choise appears on desktops in FLASH mode as mobile devises just use the first file):


<div align="center">
<script type="text/javascript" src="http://jobvideo.ml/jwplayer-6/player/jwplayer.js"></script>
<div id="hd-Element"></div>
<script type="text/javascript">
jwplayer("hd-Element").setup({
primary: "html5",
height: 280,
listbar: {
position: 'over',
size: 280, 
},
height: 280,
playlist: [{
image: "http://jobvideo.ml/images/2012/12/ridus.jpg",
sources: [
{ file: "http://content.bitsontherun.com/videos/3XnJSIm4-kNspJqnJ.mp4" }
],
title: "Sintel Movie Trailer",
description: "The Durian open movie project presented dy Blender Foundation"
},{
image: "http://jobvideo.ml/images/2012/12/channel-1.jpg",
sources: [
{ file: "http://jobvideo.ml/jwplayer-6/mediaplayer-5.9-viral/africa.flv" }
],
title: "Заголовок - Africa Animal - Title",
description: "Короткий ролик с африканским карликовым хищником"
},{
image: "http://jobvideo.ml/images/2012/12/mir-tv.jpg",
sources: [
{ file: "http://jobvideo.ml/jwplayer-6/mediaplayer-5.9-viral/video.mp4" }
],
title: "Заголовок - JW player - Title",
description: "The best HTML5/FLASH player in the world from Longtailvideo"
},{
image: "http://jobvideo.ml/images/2013/01/raztv.jpg",
sources: [
{ file: "http://jobvideo.ml/images/Leafs-Cleaning-in-Notre-Dame-area-360p.mp4", label: "360p" },
{ file: "http://jobvideo.ml/images/Leafs-Cleaning-in-Notre-Dame-area.mp4", label: "720p HD" }
],
title: "Заголовок - Leafs Cleaning in Notre Dame area - Title",
description: "Короткий ролик об осенней очистке улиц от листьев в Нотр-Даме"
}]
});
</script>
</div>

* * *

Через элемент media:content в RSS-листе также можно вставлять несколько файлов одного содержания с разным качеством, что также позволяет достигать многоформатности и предоставляет зрителю возможность выбора качества воспроизведения. Вот пример RSS-фида с одним и тем-же MP4-файлом (Leafs Cleaning in Notre Dame area), но в разном качестве (360p и 720p):
Having multiple media:content elements per RSS item is allowed too, so the multi-format and multi-quality options of JW Player can be achieved with RSS as well. Here is an example feed with the same item (Leafs Cleaning in Notre Dame area) that has an MP4 video in two qualities:


<div align="center">
<script type="text/javascript" src="http://jobvideo.ml/jwplayer-6/player/jwplayer.js"></script>
<div id="rss-hd-Element"></div>
<script type="text/javascript">
jwplayer("rss-hd-Element").setup({
playlist: "http://jobvideo.ml/jwplayer-6/player/pl2.xml",
primary: "flash",
height: 280,
listbar: {
position: 'right',
size: 200, 
},
width: 698
});
</script>
</div>

Заметьте, что файлы с разным качеством при воспроизведении потоков HLS и RTMP не могут быть загружены с помощью этого механизма - они всегда требуют дополнительного manifest-файла, который загружается через элемент media:content в RSS-листе. Дополнительную информацию смотрите в их соответствующих руководствах.
Note that multiple HLS streams and multiple RTMP streams cannot be loaded with this mechanism! Adaptive HLS and dynamic RTMP streams always require an additional manifest file, which is loaded as a single media:content in the RSS feed. See their respective guides for more info.

* * *

P.S.: Этот сервис для вас бесплатен, но пожертвования на его развитие приветствуются. А если что-то неправильно отображается, просто скачайте современный браузер, поддерживающий стандарт HTML5 - например, Гугл Хром.
P.S.: This service is free but you are encouraged to donate.

 

      JW-плеер - лучший
В наш высокотехнологичный век, мультимедийный контент на сайте имеет решающее значение. Ушли в прошлое времена, когда продавать можно было благодаря только убедительным продающим текстам.
Современный покупатель хочет увидеть товар лицом. Даже полиглоты и любители кино не хотят больше утомлять зрение чтением экранных шрифтов, предпочитая им видео- и аудио-форматы. Публика больше доверяет веб-мастерам, которые практикуют новые нестандартные решения и экспериментируют с протоколами потокового вещания.
Наконец, в эпоху процветания мобильных устройств важно, чтобы ваше видео было доступно на мобильных устройствах. И это не секрет, что мобильные телефоны далеко не всегда могут поддержать традиционную технологию FLASH - в отличие от HTML5.
Вот почему так важно правильно выбрать плеер для своего сайта. Интернет предлагает множество вариантов, например, flowplayer или плеер Тарантинова. Но представленный здесь JW Pleer с поддержкой мобильных устройств - лучший выбор.
Плеер полагается только на Adobe Flash и браузер посетителя, переключаясь между HTML5 и Flash в зависимости от их способности отображать видео-контент. Заметьте, 80% браузеров и девайсов уже читают HTML5.
JW Player-6 поддерживает 9 различных медиа-форматов: 3 типа видео-файлов (MP4, WebM, FLV), 3 типа аудио файлов (AAC, MP3, Vorbis), YouTube-видео (через их Chromeless Player API) и 2 потоковых протокола (HLS, RTMP). При определенных обстоятельствах, плеер может воспроизводить и дополнительные форматы (например, Ogg-видео или ShoutCast-потоки).
Типы файлов и протоколов, официально поддерживаемых плеером медиа-форматов: MP4 (.mp4, .m4v, .f4v, .mov), FLV (.flv), WebM (.webm), OGG (.ogv), AAC (.aac, .m4a, .f4a), MP3 (.mp3), Vorbis (.ogg, .oga), HLS, RTMP или YouTube.
Уникальность плеера - также в его способности поддерживать и отображать плей-листы. И если вам нужен вариант плеера только с поддержкой плей-листов, то просто можете скопировать здесь уже готовый для вставки на ваш сайт код, поменяв в нем ссылки.
Еще одна версия JW Player в дистрибутиве с Microsoft Silverlight уверенно воспроизводит файлы WMV (.wmv), WMA (.wma), MOV (.mov) и тоже поддерживает некое подобие плей-листов - но в настоящее время все это уже неофициально.
Получить ключ для отслеживания аналитики можно на официальном сайте longtailvideo.com сразу после регистрации там и скачивания бесплатного дистрибутива с плеером для некоммерческих сайтов, который можно затем апгрейдить до премиум-версий за $149 или $299 в год.
Заметьте, HLS в режиме Flash поддерживается только в JW6 Premium- и Ads-вариантах ($149/299).
Также, JW Player не поддерживает пока ни RTMP, ни HLS на Android. И хотя HLS официально поддерживается на Android 3.0, ряд критических ошибок мешает удовлетворительному воспроизведению.


      JW-player is the best
In our high-tech age, multimedia content on the site is crucial. Gone are the days when it was possible to sell only through persuasive texts. Modern buyer wants to see showmanship.
Even polyglots and movie fans no longer want to bore sight reading screen fonts, preferring video and audio formats. Visitors have more confidence to those webmasters who practice new and exciting solutions and experiment with streaming protocols.
Finally, in the era of prosperity of mobile devices, it is important that your video was available on mobile devices. And it is no secret that mobile phones could not support traditional technology of flash - unlike HTML5.
That's why it's important to choose the right player for your site. And the Internet offers a variety of options like flowplayer or Tarantinov player. But presented here JW Pleer supporting mobile devices is the best choice. And JW Player 6 is the world's most popular HTML5/Flash embeddable media player for websites. It supports a wide array of desktop browsers, mobile devices and media formats. It is open-source and easy to configure, customise and extend.
The player relies on Adobe Flash, as well as visitor's browser to switch between html5 and Flash, depending on their ability to display video content.
Given the Flash versus HTML5 debate, it's natural to think you need to choose one or the other. You don't. JW Player 6 is everything you love about HTML5 and Flash rolled into one incredible player. JW Player 6 automatically selects the best playback for your viewer's device and browser, so you deliver unparalleled video experience on iPhone, iPad, Android, and the Desktop. Note 80 % of the market can play HTML5.
JW Player 6 supports 9 distinct media formats: 3 video file types (MP4, WebM, FLV), 3 audio file types (AAC, MP3, Vorbis), YouTube videos (through their Chromeless Player API) and 2 streaming protocols (HLS, RTMP). Under certain circumstances, JW Player may play additional formats (like Ogg videos or ShoutCast streams).
So media type of the source can be mp4 (.mp4, .m4v, .f4v, .mov), flv (.flv), webm (.webm), aac (.aac, .m4a, .f4a), mp3 (.mp3), vorbis (.ogg, .oga), hls, rtmp or youtube - the Player is the Leader in HLS & RTMP Live Streaming
The uniqueness of the player is HTML5/FLASH video playlist solution - it will display the playlists. And if you need a configuration of the player with comprehensive playlist support, copy a ready to paste into your website embed code here.
Another version of JW Pleer distributed with Microsoft Silverlight surely supports WMV (.wmv), WMA (.wma), MOV (.mov), as well as a kind of playlists - but now it's all unofficial.
Note that Video Analytics Dashboard to track your analytics with help of JW Player Key and User Account to purchase $149/299 commercial license are only available on longtailvideo.com, after official registration and downloading a free distribution package.
Note, HLS in Flash is only supported in the JW6 Premium and Ads editions ($149/299).
Note, JW Player supports neither RTMP nor HLS on Android. Although HLS is officially supported as of Android 3.0, a number of critical bugs prevents a satisfying playback experience.