Javascript画布空白Tizen webapp

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

以下是我的示例代码：

身体{
字体：白色
}

var video=$（'源'）[0]//变量来绑定到我们的源
//创建一个数组来存储画布
//var splitCanvas=[$（'c1'）[0]，$（'c2'）[0]，$（'c3'）[0]，$（'c4'）[0]；
var splitCanvas=[$（'c1'）[0]，$（'c2'）[0]；
//一旦视频开始播放，立即启动该功能
video.addEventListener（'playing'，函数（）{
//为可读性创建一些变量
//将宽度和高度减半将得到4个象限
var w=视频宽度/2；
var h=视频高度；
//创建画布上下文，以便我们可以操纵图像
var上下文=[]；
对于（变量x=0；x<0）
.length；x++）{//将画布尺寸设置为视频的本机大小
splitCanvas[x]。宽度=w；
splitCanvas[x]。高度=h；
context.push（splitCanvas[x].getContext（'2d'）；//创建上下文
};
console.log（'drawing'）；//每33毫秒（约30 FPS）从源视频中绘制4个象限
setInterval（函数（）{//context.drawImage（img、sx、sy、swidth、sheigh、x、y、width、height）；//左上角
上下文[0]。drawImage（视频，0，0，w，h，0，0，w，
H
);
上下文[1]。drawImage（视频，
w、 0，//x，y开始剪裁
w、 h，//x，y剪裁宽度
0，0，//x，y位置
w、 h）；//放置的宽度、高度
}, 33);
});

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

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

不支持画布。

抱歉，包括较新的电视设备在内的电视设备不支持该功能

---

由于视频孔方法在视频区域打透明孔，视频在覆盖（参考底图）平面上播放，这是一个限制条件

尝试各种视频格式+编解码器。在使用mp4的日子里，Android中曾经存在这样一个bug，这可能也是同样的问题。尝试下载资产并将其放在应用程序文件夹中。文件：//协议可能会导致跨源问题。@kaido，测试了多个格式+编解码器，结果对所有人都是一样的。我将尝试使用本地视频检查是否有效谢谢你的评论，我尝试了，结果如下：1）文本未显示，因此它受支持。2） 图像显示正确，但未在画布中显示。3） 结果是：Mozilla/5.0（SMART-TV；LINUX；Tizen 3.0）AppleWebKit/538.1（KHTML，如Gecko）版本/3.0 TV Safari/538.1

2）图像显示正确，但不在画布中

你所说的@Kate是什么意思？如果我将display none更改为display block，那么图像将显示在img标记上，并且画布保持为空，没有错误。我在mozilla上尝试了一个在画布上显示图像的例子，效果很好！但我不明白为什么这个例子是有效的，而我的代码不是？@Kate，很抱歉我没有理解你的意思。链接上的示例正在工作，我共享的示例代码正在与dsiplay一起工作

none

？

display的主要用途：无

是从

img

标签中隐藏图像，但将其显示在

canvas

上。另外，在

setInterval

设置为1000时尝试您的代码，可能会出现刷新问题。谢谢您的评论，真的，这对我来说是个坏消息。我禁止Tizen进入我的生活，因为这对dev来说是浪费时间，如果我不能在电视上操纵图像或视频，目的是什么？