IMHO DOM Manipulation on the main page would be a better solution, but here it is, at least for modern browsers, from your example code.
I changed your getQueryVariable in order to be able to use it as a boolean.
To change the current playback time, you will have to wait for the video's metadata to be loaded, then you can set the currentTime property (in seconds).
In order to comply the "all browsers" support you will have to transcode your videos to ogg vorbis format, then add a source pointing to this video file. This will do for major modern browsers.
For older browsers, you will have to add a fallback (e.g. flash player or java applet).
For the "jumping playhead" in ios, you have some tricks to do : look at this question , personally I used this code which seems to work on my ipad ios 8. Note that it will lack of autoplay if you decide to add it in the video tag.
- Now, you can't get video for all browsers (e.g text-based browsers).
Live Example
Play Movie Chapter 2
Commented videoplayer.html
<video id="video" controls="controls"> <source id="mp4source" src="" type="video/mp4" /> <source id="oggSource" src="" type="video/ogg" /> </video> <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]; } } //returning false will help knowing if that variable exists return false; } function loadVideo() { var videoFile = getQueryVariable("v"); //if v is not set if (!videoFile) { alert('please choose a video file, \n maybe you came here by accident?'); //no need to go further return; } //Select the sources for the mp4 and the ogg version var mp4source = document.getElementById("mp4source"); mp4source.setAttribute("src", videoFile + ".mp4"); var oggSource = document.getElementById("oggSource"); oggSource.setAttribute("src", videoFile + ".ogv"); //if t is set if (getQueryVariable("t")) { //userAgent can be overridden but it may be the best way to detect ios devices var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/) !== null; if (iOS) { iOSLoadSeek(); } else { //wait for the video meta data to be loaded document.getElementById('video').addEventListener('loadedmetadata', function() { //then change the time position this.currentTime = getQueryVariable("t"); }) } } } //ios load seek workaround, edited from https://gist.github.com/millermedeiros/891886 function iOSLoadSeek() { var vid = document.getElementById('video'); if (vid.readyState !== 4) { //HAVE_ENOUGH_DATA vid.addEventListener('canplaythrough', iosCanPlay, false); vid.addEventListener('load', iosCanPlay, false); //add load event as well to avoid errors, sometimes 'canplaythrough' won't dispatch. vid.addEventListener('play', iosCanPlay, false); //Actually play event seems to be faster vid.play(); setTimeout(function() { vid.pause(); //block play so it buffers before playing }, 10); //it needs to be after a delay otherwise it doesn't work properly. } } //called when one of the three events fires function iosCanPlay() { //remove all the event listeners this.removeEventListener('canplaythrough', iosCanPlay, false); this.removeEventListener('load', iosCanPlay, false); this.removeEventListener('play', iosCanPlay, false); //finally seek the desired position this.currentTime = getQueryVariable("t"); this.play(); } //When the page is loaded, execute window.onload = loadVideo(); </script>
