时间戳

首页 > 解决方案 > 你能用 HTML5Video.js 视频的元素？

javascript - 你能用 HTML5Video.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);

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

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

标签： javascripthtml

解决方案

似乎 videojs 会将您的 <video> 元素包装在一个 <div> 元素中，该元素将采用您的 <video>id属性。所以当你这样做document.getElementById("video");而不是拥有预期的 <video> 元素时，你得到了包装 <div>。

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

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>

推荐阅读