Javascript Canvas 空白 Tizen webapp
Javascript Canvas blank Tizen webapp
我尝试在三星智能电视 (2017) 的 canvas 上显示视频(电视扩展 3.0),Html5 & Javascript。
这是我的示例代码:
<!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>
在模拟器和 Chrome 上,它在 chrome devtool 中正常运行:
在我的电视上,视频正在播放,但 canvas 在 Chrome Devtool 上没有错误:canvas 是空白的:
这对我来说很奇怪,因为所有测试都是一样的,视频显示但每次 canvas 都是空的。
我怀疑是DrawImage,如果我在console中没有任何错误,在drawImage中添加断点,它会正常继续,我如何找出问题所在。
关于在 canvas 上显示视频的任何想法或等效内容?
我不知道为什么它不起作用,但我可以添加一些故障排除提示(我无法将它们作为评论)
- 尝试检查 canvas 支持(我很确定它是受支持的,但验证它没有坏处!)
<canvas width="200" height="200" fill="red">
Canvas is not supported.
</canvas>
- 从绘制简单图像开始检查
drawImage
是否按预期工作!
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');
image.addEventListener('load', e => {
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
});
<canvas id="canvas"></canvas>
<div style="display:none;">
<img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
</div>
如果 drawImage
有效,问题的最可能原因是 video
不支持作为 drawImage
的有效参数。
- 检查电视上的 Tizen 版本,可能是时候进行固件升级了!在 docs 中提到需要 Tizen 3.0 或更高版本。最简单的方法是在您的浏览器上检查用户代理:
document.write(navigator.userAgent);
希望其中一项建议能帮助您缩小问题范围。
抱歉,电视设备(包括较新的电视设备)不支持此功能。
由于VIDEO_HOLE方法在视频区域打透明孔,视频在overlay(underlay)平面上播放
我尝试在三星智能电视 (2017) 的 canvas 上显示视频(电视扩展 3.0),Html5 & Javascript。
这是我的示例代码:
<!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>
在模拟器和 Chrome 上,它在 chrome devtool 中正常运行:
在我的电视上,视频正在播放,但 canvas 在 Chrome Devtool 上没有错误:canvas 是空白的:
这对我来说很奇怪,因为所有测试都是一样的,视频显示但每次 canvas 都是空的。
我怀疑是DrawImage,如果我在console中没有任何错误,在drawImage中添加断点,它会正常继续,我如何找出问题所在。
关于在 canvas 上显示视频的任何想法或等效内容?
我不知道为什么它不起作用,但我可以添加一些故障排除提示(我无法将它们作为评论)
- 尝试检查 canvas 支持(我很确定它是受支持的,但验证它没有坏处!)
<canvas width="200" height="200" fill="red">
Canvas is not supported.
</canvas>
- 从绘制简单图像开始检查
drawImage
是否按预期工作!
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('source');
image.addEventListener('load', e => {
ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);
});
<canvas id="canvas"></canvas>
<div style="display:none;">
<img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
</div>
如果 drawImage
有效,问题的最可能原因是 video
不支持作为 drawImage
的有效参数。
- 检查电视上的 Tizen 版本,可能是时候进行固件升级了!在 docs 中提到需要 Tizen 3.0 或更高版本。最简单的方法是在您的浏览器上检查用户代理:
document.write(navigator.userAgent);
希望其中一项建议能帮助您缩小问题范围。
抱歉,电视设备(包括较新的电视设备)不支持此功能。
由于VIDEO_HOLE方法在视频区域打透明孔,视频在overlay(underlay)平面上播放