video html5: Is it possible to display thumbnail from video on a specific time? -
i use have video player on browser
<video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> </video>
before clicking play, display image beginning of video, in of video, first several seconds black screen. possible make image @ specific time of video, "0:00:15", without creating thumbnail video?
maybe helps: (i have not tested it. might able set "poster" attribute of video src of image object. 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); });
Comments
Post a Comment