您可以将 HTML5 元素用于 Video.js 视频吗？

所以我最初在 HTML5 视频之上创建了一个画布，然后我将视频播放器从 HTML5 切换到 Video.js 并收到错误

“未捕获的类型错误：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是 HTMLCanvasElement 的“（CSSImageValue 或 HTMLImageElement 或 SVGImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap 或 OffscreenCanvas）”类型。”。

当我尝试实际绘制图像时会发生错误。

这是我使用 video.js 的 HTML 代码：

<video class = "video-js vjs-theme-fantasy" vjs-big-play-centered muted controls id="video" data-setup="{}">

这是我尝试绘制画布图像的 Javascript 的一小段：

var video = document.getElementById("video");
let screenshot_context = screenshot_canvas.getContext("2d");
screenshot_context.drawImage(video, originX, originY, boxWidth, boxHeight, 0, 0, boxWidth, boxHeight);

我在网上搜索，似乎在尝试使用 canvas 元素时使用 Video.js 不应该成为问题，我只是想知道是否有人熟悉 HTML5 canvas 元素和 Video.js （我知道支持 HTML5 视频）可以确认 HTML canvas 元素也与 Video.js 兼容吗？

如果这是一个愚蠢的问题，我提前道歉，我是 javascript 新手，仍在学习诀窍！

看来 videojs 会将您的

您可以通过将此行更改为类似的内容来解决该问题

const video = document.querySelector("video#video, #video video");

处理 videojs 弄乱你的文档和没有弄乱你的文档的两种情况。

document.getElementById("btn").onclick = (evt) => {
  const canvas = document.getElementById("canvas");
  const video = document.querySelector("video#video, #video video");
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext("2d").drawImage(video, 0, 0);
};

@import url("https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.7/video-js.min.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.11.7/video.min.js"></script>
<video class = "video-js vjs-theme-fantasy" vjs-big-play-centered muted controls id="video" data-setup="{}">
  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
<button id="btn">draw to canvas</button>
<canvas id="canvas"></canvas>