I try to display video on canvas in a Samsung SmartTV (2017) with (TV extension 3.0) with Html5 & Javascript.
Here is a my sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style>
body {
font: white
}
</style>
<body>
<!-- <video width="820" height="240" controls>
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv">
</video> -->
<video id="source" src="https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4" autoplay muted
controls></video>
<hr>
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
<canvas id="c3"></canvas>
<canvas id="c4"></canvas>
</body>
<script>
var video = $('#source')[0]; //variable to tie to our source
//create an array to store our canvases
// var splitCanvas = [$('#c1')[0], $('#c2')[0], $('#c3')[0], $('#c4')[0]];
var splitCanvas = [$('#c1')[0], $('#c2')[0]];
//start the function once the video starts playing
video.addEventListener('playing', function () {
//create some variables for readability
//halving the width and height results in 4 quadrants
var w = video.videoWidth / 2;
var h = video.videoHeight;
//create a canvas context so we can manipulate the images
var context = [];
for (var x = 0; x < splitCanvas
.length; x++) { //set the canvas dimensions to the native size of the video
splitCanvas[x].width = w;
splitCanvas[x].height = h;
context.push(splitCanvas[x].getContext('2d')); //create the context
};
console.log('drawing'); //Draw the 4 quadrants from the source video every 33 ms (approx 30 FPS)
setInterval(function () { //context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); //Upper left
context[0].drawImage(video, 0, 0, w, h, 0, 0, w,
h
);
context[1].drawImage(video,
w, 0, //x, y start clipping
w, h, //x, y clipping width
0, 0, //x, y placement
w, h); //width, height of placement
}, 33);
});
</script>
</html>On emulator and Chrome, it's working without error in chrome devtool:
On my TV, video playing but canvas is blank without error on Chrome Devtool:
It's a strange for me because all tests are same, video showing but canvas was empty every time.
I suspect DrawImage,How can i find out where the problem comes from if i don't have any errors in the console and when I add a breakpoint in the drawImage, it continues normally.
any idea or equivalent for display video on canvas?
from Javascript Canvas blank Tizen webapp
No comments:
Post a Comment