对象到画布 JavaScript

Question

我正在智能电视上测试 javascript，

我尝试将对象视频放到画布上。使用 html5 视频标签，它可以在我的浏览器中运行，但不能在我的智能电视中运行。

但是当我尝试使用对象播放器时，出现以下错误消息：

无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是“（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap）”类型

经过多次测试（id，对象id，对象src..）结果是相同的，我不知道如何将对象视频获取到画布。

这是一个简单的 html 测试：

<canvas id="test" width="300" height="300"></canvas>
<div id="test" style="left: 0%; top: 0%; width: 25%; height: 25%; position: fixed;">
    <object type="application/avplayer" style="width: 480px; height: 270px;"></object>
</div>

和js：

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const video = document.getElementsByTagName('object');
//const video = document.getElementsById('idVideo');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)

这是我的目标的示例，但我无法使用视频标签： http: //jsfiddle.net/on1kh4o0/

有什么想法或技巧可以用对象获得相同的结果吗？

Answer 1

你不能<object>直接在画布上绘制 HTMLObjectElement ( )，它没有被定义为CanvasImageSource。

作为信息，目前唯一定义为这种类型的对象是

• HTML图像元素
• SVG图像元素
• HTML视频元素
• HTMLCanvas元素
• 图像位图
• 离屏画布

尽管它仍然只是规范草案的一部分，但预计CSSImageValue也会添加到此列表中。

但 HTMLObjectElement 不属于此列表，而且永远不会属于此列表。

事实上，即使您可以在 <object> 中加载视频或图像，就像使用 <iframe> 一样，您也可以加载文本或 HTML 文档或许多其他无法在画布上绘制的文档类型。

现在到你的问题，正如评论中指出的那样，你肯定面临着XY 问题。

目前，使用视频元素是在画布上绘制视频的唯一方法_{（也许将来我们也可以使用Web-Codecs API，但那是将来的事）。}

因此，请尝试找出为什么您的浏览器不想在画布上绘制此视频。在某些 Android 浏览器阻止绘图的
日子里，尝试来自不同来源的不同视频任何跨源 mp4 视频的，也许您面临类似的问题，如果可以，请尝试从 <input type 输入视频=“文件”>。

如果您的浏览器有调试工具，请使用它们。（例如，如果它基于 Chromium，您应该能够导航到chrome://media-internals/或chrome://inspect可能会引导您找到一些日志。

但无论如何，<object>在这里使用作为源不会对您有帮助。