jplayer

by bvotcode

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/jplayer/jquery.jplayer.min.js
"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/add-on/jplayer.playlist.min.js"></script>
<link href="
https://cdn.jsdelivr.net/npm/[email protected]/dist/skin/blue.monday/css/jplayer.blue.monday.min.css
" rel="stylesheet">


<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

    new jPlayerPlaylist({
        jPlayer: "#jquery_jplayer_1"
       
    }, [
        {
				title: "<div> <img align='top' src='https://i.imgur.com/WWS5ARlt.png'> <br> Name 1 </div> ",
        mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
            },
            {
				title:"Name 2",
            mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
            },
            {
				title:"Nam 3",
            mp3:"http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
            }
    ], {

        play:function(a){
            console.log(a.jPlayer.status.media.poster);   
        },
        playlistOptions: {
		    	autoPlay: true
       		},
        swfPath: "../../dist/jplayer",
        supplied: "oga, mp3",
        wmode: "window"
    });
});
//]]>
</script>

<body>
<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-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-progress">
                <div...