jQuery video tag src changer

http://stackoverflow.com/a/13692420/189937

by jesus_tesh

HTML

<div id="video"><video></video></div>
<ul>
    <li><a href="#" data-video="video1.mp4">Video 1</a></li>
    <li><a href="#" data-video="video2.mp4">Video 2</a></li>
    <li><a href="#" data-video="video3.mp4">Video 3</a></li>
</ul>

CSS

html { padding: 10px; }
#container { width: 450px; }
#video { width: 320px; height: 240px; border: 3px solid #CCC; }
ul { margin: 10px 0; width: 320px; padding: 0; }
ul li { display: inline; margin: 0 10px 0 0; padding: 0;  }

JavaScript

$("a[data-video]").click(function() {
    var video = $(this).data("video");
    $("video").html($("<source></source>").prop("src", video));
});