A very useful feature that Youtube already implemented long time ago is the possibility of sharing a video link with the exact time where we want to start playing, instead of having to watch the entire video to get to exact point. Another use is also interesting to save the time where we were to continue later.
On Youtube there was a moment that It appeared automatically, but later It chose to leave this feature as optional in the Share section:
In this post I would like to show how it would be possible to manage this functionality using the HTML 5 video tag.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<video id="myVideo" controls autoplay>
<source src="[YOUR_VIDEO_SOURCE]" />
</video>
<div>
<input id="btnStartAt" type="button" value="Start At" />
<input id="btnClearMark" type="button" value="Clean mark" />
</div>
<script>
(function () {
function Id(elem) {
return document.getElementById(elem);
}
function getParams(values) {
var vars = [];
for (var i = 0; i < values.length; i++) {
var position = values[i].indexOf('=');
if (position > 0) {
var key = values[i].substring(0, position),
value = values[i].substring(position + 1);
vars[key] = value;
}
}
return vars;
}
function getFormat(seconds) {
var date = new Date(seconds * 1000);
var hh = date.getUTCHours();
var mm = date.getUTCMinutes();
var ss = date.getSeconds();
if (hh > 12) { hh = hh - 12; }
if (hh < 10) { hh = "0" + hh; }
if (mm < 10) { mm = "0" + mm; }
if (ss < 10) { ss = "0" + ss; }
return hh + "h" + mm + "m" + ss + "s";
}
var query = location.search.substring(1),
params = getParams(query.split('&'));
var time = params["t"],
video = Id("myVideo");
video.onprogress = function (e) {
btnStartAt.value = "Start at: " + getFormat(video.currentTime);
};
Id("btnStartAt").addEventListener("click", function () {
location.search = "?t=" + getFormat(video.currentTime);
});
Id("btnClearMark").addEventListener("click", function () {
location.search = "";
});
if (time) {
var hoursPosition = time.indexOf('h'),
minutesPosition = time.indexOf('m'),
secondsPosition = time.indexOf('s');
var hours = parseInt(time.substring(0, hoursPosition)) * 3600,
min = parseInt(time.substring(hoursPosition + 1, minutesPosition)) * 60,
sec = parseInt(time.substring(minutesPosition + 1, secondsPosition));
if (!isNaN(hours))
sec += hours;
if (!isNaN(min))
sec += min;
video.play();
var setted = false;
video.oncanplay = function () {
if (!setted)
video.currentTime = sec;
};
}
})();
</script>
</body>
</html>
The first thing we have is a HTML 5 video tag with the source you want to play. In this example, I use a button to change the URL of the page, setting the hours, minutes and seconds in the following format: 00h00m00s (the getFormat function is responsible for passing the seconds to this format). Each time the page is loaded, we recover the query string using location.search and use getParams to build an array with the values that we were passed as a parameter, with the goal to find the a value called t, which contains the exact time that the playback should start. We also handle the progress event that shows the value would have if we would like to start the video at that moment and the click event of the button that adds the value to location.search. Also I added a button to remove the check and start again from the beginning.
If you already have a timestamp set in the URL, the code convert the values in hours and minutes to seconds, and once the video is able to reproduce (event canplay), change the value of currentTime using the passed parameter.
Hope this helps.
Cheers!