Javascript Canvas 空白 Tizen webapp答案

【问题标题】：Javascript Canvas blank Tizen webappJavascript Canvas 空白 Tizen webapp
【发布时间】：2020-10-17 12:39:15
【问题描述】：

我尝试在带有 Html5 和 Javascript 的三星 SmartTV (2017) 的画布上显示视频（电视扩展 3.0）。

这是我的示例代码：

<!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 中正常工作：

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

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

我怀疑 DrawImage，如果我在控制台中没有任何错误，并且在 drawImage 中添加断点时，它会正常继续，如何找出问题所在。

在画布上显示视频有什么想法或等效的吗？

【问题讨论】：

尝试各种视频格式+编解码器。以前用mp4的时候安卓也有过这样的bug，可能是同一种问题。
尝试下载资产并将其放入应用文件夹中。可能存在由 file:// 协议引起的跨域问题。
@Kaiido，测试了多种格式+编解码器，结果都是一样的。我会尝试使用本地视频来检查是否有效，谢谢

标签： javascript html tizen tizen-web-app tizen-emulator

【解决方案1】：

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

由于 VIDEO_HOLE 方法会在视频区域打透明孔并在覆盖（底层）平面上播放视频，这是一个约束

【讨论】：

感谢您的评论，真的，这对我来说是个坏消息。我禁止 Tizen 进入我的生活，因为这对开发人员来说是浪费时间，如果我不能在电视上操作图像或视频，目的是什么？

【解决方案2】：

我不知道为什么它不起作用，但我可以添加一些故障排除提示（我无法将它们作为评论）

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

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

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

【讨论】：

感谢您的评论，我已经尝试过，结果如下：1) 文本未显示，因此受支持。 2) 图像正确显示但不在画布中。 3) 结果是：Mozilla/5.0 (SMART-TV; LINUX; Tizen 3.0) AppleWebKit/538.1 (KHTML, like Gecko) Version/3.0 TV Safari/538.1
2) Image is showing correctly but not in canvas@Kate 是什么意思？
如果我将显示无更改为显示块并且画布保持为空且没有错误，则图像将显示在 img 标签上。我在 Mozilla 上尝试了一个在画布上显示图像的示例，效果很好！ link 但我不明白为什么这个例子有效而我的代码无效？
@Kate 对不起，我没有得到你。链接上的示例正在运行，我共享的示例代码正在使用 dsiplay none? display: none 的主要目的是隐藏 img 标签中的图像，但将其显示在 canvas 上。
还可以尝试将 setInterval 设置为 1000 的代码，可能刷新是个问题。