通过 canvas 绘制 VideoJS 帧

Question

一旦你使用VideoJS播放视频，你就不应该再碰VideoJS使用的<video>标签:

我正在通过从 :

中获取的代码将视频帧绘制到 canvas

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>

问题

问题是这行代码获取了 VideoJS 使用的 <video> 元素：

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

以上语句不是使用VideoJS API。 VideoJS API 是否有标准的方法来做到这一点？是否有另一种方法可以将 VideoJS 绘制到 canvas，这与 VideoJS API 更一致？

Answer 1

@VC.One 评论回答了我的问题：

There is nothing wrong with accessing the <video> object to draw to <canvas>. VideoJS is just some code for user interface and handling of loading some file types (like M3U8 playlist). I think that Asker was told not to touch the video tag because they were adjusting it ways that clash with VideoJS options (like setting poster in video tag when VideoJS has its own poster option etc)...

通过 canvas 绘制 VideoJS 帧

Draw VideoJS frames by a canvas

html

javascript

html5-video

html5-canvas

video.js

问题