JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<h3>Playlist :</h3>
<ol>
    <li><a href="#video_1">load video # 1</a></li>
    <li><a href="#video_2">load video # 2</a></li>
    <li><a href="#video_3">load video # 3</a></li>
</ol>
<video id="v" preload="metadata" controls="controls" autoplay="true" width="400" height="300">
</video>
<p id="error">No video loaded</p>

CSS

#v{
    display : none;
}
#error{

}

JavaScript

var v = $('#v');
var videos = {
    video_1 : [
        {type : "video/mp4", src:"http://html5demos.com/assets/dizzy.mp4"},
        {type : "video/webm", src:"http://html5demos.com/assets/dizzy.webm"},
        {type : "video/ogv", src:"http://html5demos.com/assets/dizzy.ogv"}
    ],
    video_2 : [
        {type : "video/m4v", src:"http://protofunc.com/jme/media/bbb_trailer_mobile.m4v"},
        {type : "video/ogg", src:"http://protofunc.com/jme/media/bbb_trailer_400p.ogg"}
    ],
    video_3 : [
        {type : "video/mp4", src:"http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4"},
        {type : "video/webm", src:"http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.webm"}
    ]  
};
var video_id = location.toString().replace(/^.*?\?(.*?)$/,'$1');
console.log(video_id);
if(typeof videos[video_id] !== 'undefined')
    {
        $.each(videos[video_id],function(i,el){
            $('<source />').attr(el).appendTo(v);
        });
        v.show();
        $('#error').hide();
    }
$('a').on('click',function(e){
    window.location = window.location.toString().replace(/\?.*/,'') + '?' + $(this).attr('href').substring(1);
    e.preventDefault();
    e.stopPropagation();
    return false;
});