jPlayer Audio Playlist / Аудиоплееры / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Для Bootstrap: 3, 4

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

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

Вес файла: 119.3 Kb

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

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

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

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

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

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

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

Рейтинг: 4.3 / 5 - 15 голосов

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

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

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

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

Теги: адаптивный, Snippet, сниппет, Bootstrap, аудио, Audio, Responsive, html, jplayer

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

Добавлено: 2017-02-16 в 15:56

Метка: 1567149056

⇄ ⇅

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
 <div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
 <div class="jp-type-playlist">
 <div class="jp-gui jp-interface">
 <div class="jp-controls"> 
 <button class="jp-play" role="button" tabindex="0">play</button>
 </div>
 <div class="jp-progress">
 <div class="jp-seek-bar">
 <div class="jp-play-bar"></div>
 </div>
 </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-time-holder">
 <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
 <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</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:"Cro Magnon Man",
 mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
 oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
 },
 {
 title:"Your Face",
 mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
 oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
 },
 {
 title:"Cyber Sonnet",
 mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
 oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
 },
 {
 title:"Tempered Song",
 mp3:"http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3",
 oga:"http://www.jplayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"
 },
 {
 title:"Hidden",
 mp3:"http://www.jplayer.org/audio/mp3/Miaow-02-Hidden.mp3",
 oga:"http://www.jplayer.org/audio/ogg/Miaow-02-Hidden.ogg"
 },
 {
 title:"Lismore",
 mp3:"http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3",
 oga:"http://www.jplayer.org/audio/ogg/Miaow-04-Lismore.ogg"
 },
 {
 title:"The Separation",
 mp3:"http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3",
 oga:"http://www.jplayer.org/audio/ogg/Miaow-05-The-separation.ogg"
 },
 {
 title:"Thin Ice",
 mp3:"http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3",
 oga:"http://www.jplayer.org/audio/ogg/Miaow-10-Thin-ice.ogg"
 }
 ], {
 swfPath: "../../dist/jplayer",
 supplied: "oga, mp3",
 wmode: "window",
 useStateClassSkin: true,
 autoBlur: false,
 smoothPlayBar: true,
 keyEnabled: true
 });
});
//]]>
</script>

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

BootstrapTema

jPlayer Audio Playlist

Скриншот

Подробнее

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

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

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