对象到画布javascript

我正在智能电视上测试javascript

我试着把一个对象视频放到画布上。html5视频标签可以在我的浏览器中使用，但不能在我的智能电视中使用

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

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

在使用（id，objectid，objectsrc..）进行多次测试后，结果是一样的，我不知道如何将对象视频放到画布上

下面是一个简单的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>

以下是我的目标示例，但我不能使用视频标签：

---

有什么想法或技巧可以让一个对象得到同样的结果吗？

你不能直接在画布上绘制一个HTMLObjectElement（

），它不被定义为一个对象

对于信息，目前定义为此类型的对象只有

• HTMLImageElement
• SVGImageElement
• HTMLVideoElement
• HTMLCanvasElement
• 图像位图
• 越洋

尽管它仍然只是规范草案的一部分，但预计也会如此

但是HTMLObjectElement不在这个列表中，而且肯定永远不会

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

---

现在谈谈你的问题，正如评论中所指出的，你肯定面临着一个挑战

使用视频元素是目前在画布上绘制视频的唯一方法（也许将来我们也可以使用，但这是为了将来）

因此，请尝试找出浏览器不希望在画布上绘制此视频的原因。
尝试不同的视频，从不同的来源，回到以前，一些Android浏览器阻止在画布上绘制任何跨源mp4视频，可能你也面临类似的问题，如果可以的话，试着从浏览器输入视频

如果您的浏览器有调试工具，请使用它们。（例如，如果它基于铬，您应该能够导航到

chrome://media-internals/

或

chrome://inspect

这可能会引导您找到一些日志

---

但是无论如何，使用

作为源代码对您没有帮助。

也许您需要一个

video

元素而不是

object

。请看，您不能使用video标记，因为您的智能电视不支持它？您当前正试图在

HTMLObjectElement

类型上使用

drawImage

，错误提示：不会不行。我不确定问题是否出在对象上，但我肯定您正在尝试在此处绘制数组，而不是实际对象。

document.getElementsByTagName（）

返回数组。因此您应该使用

video[0]

而不是

video

。除非元素中有多个对象，否则必须使用正确的索引号而不是0。不过，请参阅

canvasrendingcontext2d.drawImage（）上的文档

有一个允许作为有效类型的类型列表。

HTMLObjectElement

不是其中之一。如果没有一点尝试和错误，这些事情通常很难弄清楚。返回到使用视频。小提琴中的示例使用了

.ogv

源代码。您的电视支持这种格式吗？答案非常清楚！我将更新我的线程关于我最初在视频标签和画布上遇到的问题，请提供更多详细信息。@ValentinP您也可以用这些详细信息提出一个新问题，我想您不会是唯一一个试图在画布上绘制的人。这个问题有一定的价值，即使在原点出现XY问题。

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)