如何使用 javascript 在 HTML canvas 元素上嵌入 YouTube 网址

Question

我正在努力如何使用 JavaScript 在 html canvas 元素上播放 embed youtube url。

我尝试过的示例代码

videoAsset = document.createElement("video");
youtube = document.createElement("source");
youtube.src = "https://www.youtube.com/watch?v=nOEw9iiopwI";
youtube.type = "video/youtube";
videoAsset.appendChild(youtube);

或

<canvas id=c></canvas>
<video id=v controls loop>
    <source src=https://www.youtube.com/watch?v=nOEw9iiopwI type=video/youtube>
    <source src=https://www.youtube.com/watch?v=nOEw9iiopwI type=video/youtube>          
</video>

上面的代码对我不起作用。

Answer 1

因为您正在使用 YouTube 视频。你为什么不使用Youtube Api。You tube api。API很清晰并且运行良好。问题中指定的url将导致iframe而不是视频。广告Api还提供了很多自定义选项。

Answer 2

您可以使用 html 屏幕捕获 API，然后像素就是您的了。我准备了一个小演示，截至 2024 年 5 月，它仅适用于 Chromium 桌面：https://github.com/eyaler/LordTubeMaster