Javascript Canvas空白Tizen Web应用程序

如何解决Javascript Canvas空白Tizen Web应用程序

我尝试在具有（TV扩展3.0），带有Html5和Javascript的Samsung SmartTV（2017）中在画布上显示视频。

这是我的示例代码：

<!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,w,h,h
            );
            context[1].drawImage(video,//x,y start clipping
                w,y clipping width
                0,y placement
                w,h); //width,height of placement
        },33);
    });
</script>

</html>

在模拟器和Chrome上，chrome devtool可以正常运行

在我的电视上，可以播放视频，但是在Chrome Devtool上画布为空白，没有错误：

对我来说很奇怪，因为所有测试都是相同的，视频显示但画布每次都是空的。

我怀疑DrawImage，如果我在控制台中没有任何错误，以及如何在drawImage中添加断点，则如何继续找出问题出在哪里？

在画布上显示视频的任何想法或等效想法？

解决方法

抱歉，电视设备（包括较新的电视设备）不支持此功能。

由于VIDEO_HOLE方法在视频区域打了一个透明孔，并且视频在覆盖（底图）平面上播放，因此受到限制

对于它为什么不起作用，我没有答案，但是我可以添加一些故障排除提示（我无法将其作为注释）

尝试检查画布的支持（我很确定支持它，但是验证它没有害处！）

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

希望其中一项建议可以帮助您缩小问题范围。

Javascript Canvas空白Tizen Web应用程序

如何解决Javascript Canvas空白Tizen Web应用程序

解决方法

相关推荐