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>
