video html5: Is it possible to display thumbnail from video on a specific time? - html

Question

I use this to have a video player on browser
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
Before clicking play, it display an image from the very beginning of the video, but in most of my video, first several seconds is black screen. Is it possible to make it get image at a specific time of the video, like "0:00:15", without creating thumbnail for the video?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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;
}
}

Answer 5

Add #t=15 to your video source, like below
<video width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
This will starts video after 15 seconds.