jPlayer Video Playlist / Видеоплееры / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Видеоплееры

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 370.5 Kb

Уникальный ID: 1826

Количество символов:

Посмотрели: 4510 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-1826-20

Скачали бесплатно: 197 раз

Прокомментировали: 0 раз

Рейтинг: 4.4 / 5 - 9 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, video, видео, адаптивное, Bootstrap, playlist, Responsive, html, jplayer, Fullscreen

Поделился: BootstrapТема

Добавлено: 2017-02-17 в 13:28

Метка: 1567148904

⇄ ⇅

<div id="jp_container_1" class="jp-video jp-video-360p" role="application" aria-label="media player">
 <div class="jp-type-playlist">
 <div id="jquery_jplayer_1" class="jp-jplayer"></div>
 <div class="jp-gui">
 <div class="jp-video-play">
 <button class="jp-video-play-icon" role="button" tabindex="0">play</button>
 </div>
 <div class="jp-interface">
 <div class="jp-progress">
 <div class="jp-seek-bar">
 <div class="jp-play-bar"></div>
 </div>
 </div>
 <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
 <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
 <div class="jp-controls-holder">
 <div class="jp-controls">
 <button class="jp-previous" role="button" tabindex="0">previous</button>
 <button class="jp-play" role="button" tabindex="0">play</button>
 </div>
 <div class="jp-volume-controls">
 <button class="jp-mute" role="button" tabindex="0">mute</button>
 <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
 <div class="jp-volume-bar">
 <div class="jp-volume-bar-value"></div>
 </div>
 </div>
 <div class="jp-toggles">
 
 <button class="jp-full-screen" role="button" tabindex="0">full screen</button>
 </div>
 </div>
 <div class="jp-details">
 <div class="jp-title" aria-label="title">&nbsp;</div>
 </div>
 </div>
 </div>
 <div class="jp-playlist">
 <ul>
 
 <li>&nbsp;</li>
 </ul>
 </div>
 <div class="jp-no-solution">
 <span>Update Required</span>
 To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
 </div>
 </div>
 </div>

new jPlayerPlaylist({
 jPlayer: "#jquery_jplayer_1",
 cssSelectorAncestor: "#jp_container_1"
 }, [
 
 {
 title:"Finding Nemo Teaser",
 artist:"Pixar",
 m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
 ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
 webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
 poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
 },
 {
 title:"Incredibles Teaser",
 artist:"Pixar",
 m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v",
 ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",
 webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",
 poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"
 },
 {
 title:"Finding Nemo Teaser",
 artist:"Pixar",
 m4v: "http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v",
 ogv: "http://www.jplayer.org/video/ogv/Finding_Nemo_Teaser.ogv",
 webmv: "http://www.jplayer.org/video/webm/Finding_Nemo_Teaser.webm",
 poster: "http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png"
 }
 ], {
 swfPath: "../../dist/jplayer",
 supplied: "webmv, ogv, m4v",
 useStateClassSkin: true,
 autoBlur: false,
 smoothPlayBar: true,
 keyEnabled: true
 });

});
//]]>
</script>

</div>
</div>
</div>

BootstrapTema

jPlayer Video Playlist

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0