while implementing canvas you can hide the video tag using css
<html>
<head><script type="text/javascript">
window.onload = show;
function show() {
this.video = document.getElementById("video");
this.c1 = document.getElementById("c1");
this.ctx1 = this.c1.getContext("2d");
var self = this;
this.video.addEventListener("play", function() {
self.width = self.video.videoWidth ;
self.height = self.video.videoHeight ;
self.timerCallback();
}, false); }
function timerCallback ()
{
if (this.video.paused || this.video.ended) {
return;}
this.computeFrame();
var self = this;
setTimeout(function () {
self.timerCallback();
}, 0);
}
function computeFrame() {
this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
return;}
</script>
</head>
<title> Video + Canvas </title>
<body>
<table>
<tr>
<td>
<video id="video" width="480" height="360" src="video.mp4" controls> </video>
</td>
<td>
<canvas id="c1"width="480" height="360" > Your Browser does not support HTML 5 get the latest </canvas>
</td>
</tr>
</table>
</body>
</html>DEMO click to view the demo
No comments:
Post a Comment