switch Video

Original - schlechterer Code - http://jsbin.com/iqoloj/2/

by Jens Grochtdreis

HTML

<div class="videocnt">

    <video id="video1" name="video" width="320" height="240" controls autoplay src=""></video>

    <button href="#" data-target="http://archive.org/download/qplanes/q-planes.mp4">QPlanes</button>
  
    <button href="#" data-target="http://archive.org/download/WhiteLegion/WhiteLegion-1936.mp4">White Legion</button>

</div>

CSS

button {
 background: #ccc;
 border-radius: 6px;
 font-family: Verdana, Arial, sans-serif;
 padding:10px;
 margin:10px;
 text-align:center;
 min-width:120px;
 max-width:280px;
 color:#000;
 letter-spacing:0.2em;
 display: block;
}
button:hover { color: #fff; }

JavaScript

$(document).ready(function() {
    $("button").click(function(event) {

        var videoURL =$(this).data("target");
        var myVideo = $("#video1");
        myVideo.attr("src", videoURL);
        event.preventDefault();
        myVideo.play();
    });
});