jPlayer Dynamic multi player

jPlayer Dynamic multi player

by onigetoc

HTML

<link rel="stylesheet" href="https://rawgit.com/happyworm/jPlayer/master/dist/skin/blue.monday/css/jplayer.blue.monday.css">
<script src="https://rawgit.com/happyworm/jPlayer/master/dist/jplayer/jquery.jplayer.min.js"></script>
<a href="http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3">MP3 audio title</a>
<p>
<a href="http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v">MP4 Video Title</a>
<p>
    <audio controls>
        <source src="http://live96.917xfm.de/;stream" type="audio/mp3">
    </audio>
    <p>
        <audio controls>
            <source src="http://www.music.helsinki.fi/tmt/opetus/uusmedia/esim/a2002011001-e02-128k.ogg" type="audio/mp3">
        </audio>
        <p>
            <video controls poster="http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png">
                <source src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mpeg">
            </video>
            <p>
                <video controls poster="http://www.jplayer.org/video/poster/Finding_Nemo_Teaser_640x352.png">
                    <source src="http://www.jplayer.org/video/m4v/Finding_Nemo_Teaser.m4v" type="video/mpeg">
                </video>
                <p> <a href="javascript:void(0)" id="setAudio">setMedia(A:{mp3})</a>

CSS

code {
    border:solid 1px blue;
    width:100%;
    display:inline-block;
}

JavaScript

$(document).ready(function () {

     var this_poster = '';

     $('audio,video,a[href$="mp3"],a[href$="m4v"]').each(function (i) {

         var jpthis = $(this);

         jpthis.replaceWith('<div id="jp_container_' + i + '" class="jp-video jp-video-270p" role="application" aria-label="media player"><div class="jp-type-playlist"><div id="jquery_jplayer_' + i + '" 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><button class="jp-next" role="button" tabindex="0">next</button><button class="jp-stop" role="button" tabindex="0">stop</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-repeat" role="button" tabindex="0">repeat</button><button class="jp-shuffle" role="button" tabindex="0">shuffle</button><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>');


         if (jpthis.is('a[href$="mp3"]') || jpthis.is('a[href$="m4v"]')) {
             var this_src = jpthis.attr('href');
             var filename = jpthis.text();
         } else {
             var this_src = jpthis.find('source').attr('src');

             var filename =...