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

source 1 source 2


Comments

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

php - Magento - Deleted Base url key -

android - How to disable Button if EditText is empty ? -