video html5: Is it possible to display thumbnail from video on a specific time?
I just want to add one more thing in this I guess you forgot to add preload="metadata" attribute in video tag like the below
<video preload="metadata" width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
and one more thing I want to add that this will not starts video after 15 seconds, this will only take an screenshot from video and make it as a first view of the video
Maybe this helps: (I have not tested it. Also you might be able to set the "poster" attribute of the video to the src of the image object. Just try it. =) )
<video width="320" height="240" controls id="video">
<source src="video.mp4" type="video/mp4">
</video>
$(document).ready(function() {
var time = 15;
var scale = 1;
var video_obj = null;
document.getElementById('video').addEventListener('loadedmetadata', function() {
this.currentTime = time;
video_obj = this;
}, false);
document.getElementById('video').addEventListener('loadeddata', function() {
var video = document.getElementById('video');
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var img = document.createElement("img");
img.src = canvas.toDataURL();
$('#thumbnail').append(img);
video_obj.currentTime = 0;
}, false);
});
Source 1 Source 2
Using the poster attribute is the easiest way to go. Getting a preview image of the video from a time other than the start is exactly what its designed for.
http://www.w3schools.com/tags/att_video_poster.asp
Trying to create a function to dynamically grab another segment of the video to use as the poster will undoubtedly create more latency and overhead for the client, negatively affecting the UX.
I did it this way:
It jumps to 0 if the currentTime is 15, but will go over the 15s mark when played
html:
<video id="video1" src="path/to/video#t=15" onplay="goToStart()" controls ></video>
javascript:
function goToStart(){
if (document.getElementById('video1').currentTime == 15){
document.getElementById('video1').currentTime = 0;
}
}