In a website there are 2 video tags with different id's. One is a preview monitor in a modal dialog and the other one is a mainview monitor in the website itself.
Solution 1:
You can try to load the video only once (in the mainview) and show the preview in a separate canvas.
Something like:
var canvas = document .getElementById ('canvas' );
var ctx = canvas.getContext ('2d' );
var video = document .getElementById ('video' );
video.addEventListener ('play' , function (var $this = this ;
var cw = Math .floor (video.clientWidth / 5 );
var ch = Math .floor (video.clientHeight / 5 );
canvas.width = cw;
canvas.height = ch;
(function render (if (!$this.paused && !$this.ended ) {
ctx.drawImage (video,0 ,0 ,cw,ch)
setTimeout (render, 1000 / 30 );
}
})();
});
Copy (See jsfiddle for the HTML)
This approach require a bit more of coding in order to manage autostart and reset of main video when user switch to/from preview main video,
but it allows you to use just one canvas and draw inside it all previews.
You can read this article for more information on html5 and combos
Post a Comment for "Html5 - Loading Video Only Once But Use It In Two Different Tags"