Passing Variables via URL to change source tag

Vote count:

0

I have 15 videos I need to show. Instead of creating 15 pages with each html5 video embed targeting a different video, I rather have just one page and via the URL tell the player what to load. This way I can just have 15 custom links but just one player and one html page.

ex. http://ift.tt/1AzNvjh

ex. http://ift.tt/16oP323 - this should jump to the player playhead to a point in time.

So far i got this on my "videoplay.html"

<script>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
alert('Query Variable ' + variable + ' not found');
}
var videoFile = getQueryVariable("v");
var videoElement = document.getElementById("mp4source");
videoElement.setAttribute("source", videoFile + ".mp4"); 
</script>

<video id="mp4" controls="controls">
  <source id="mp4source" src="../videos/jude.mp4" type="video/mp4"  />
 </video>

and on my "Main.html" page

<div id="menubar1">

        <a href="videoplayer.html?v=mymovie">Play Movie</a>
        <a href="videoPlayer.html?v=mymovie&t=14.5">Chapter 2</a>
  </div>

I am a beginner to javascript, please be specific with your code.

Thanks

asked 32 secs ago

Thanu

1

Passing Variables via URL to change source tag