canvas中播放视频 vue

Vue 中使用 Canvas 播放视频
在 Vue 项目中，可以通过结合 <video> 和 <canvas> 元素来实现在画布上播放视频的功能。具体来说，获取 <video> 元素的引用并将其帧绘制到 <canvas> 上是一个常见做法[^1]。
创建组件结构
首先，在 Vue 组件模板内定义 video 和 canvas 元素：
<template>
<div>
<!-- 隐藏的 video 元素 -->
<video ref="myVideo" style="display:none;" controls>
<source src="your-video-file.mp4" type="video/mp4">
</video>

<!-- 显示的 canvas 元素 -->
<canvas ref="myCanvas"></canvas>
</div>
</template>
登录后复制
初始化 Video 和 Canvas 对象
接着，在脚本部分初始化这两个 DOM 节点，并设置相应的逻辑以确保当视频开始播放时能够持续更新画布上的图像数据：
<script>
export default {
mounted() {
const video = this.$refs.myVideo;
const canvas = this.$refs.myCanvas;
const context = canvas.getContext('2d');

// 设置 canvas 尺寸匹配 video
function setCanvasSize() {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
}

// 当视频元数据加载完成时调整 canvas 大小
video.addEventListener('loadedmetadata', () => {
setCanvasSize();
});

// 监听视频尺寸变化事件 (例如旋转后的手机横屏/竖屏切换)
window.onresize = () => setTimeout(setCanvasSize, 100);

// 定义每秒调用多次用于渲染当前视频帧至 canvas 的函数
function drawFrame() {
if (!video.paused &amp;&amp; !video.ended) {
requestAnimationFrame(drawFrame);
context.drawImage(video, 0, 0); // 把视频帧绘制成图片显示在 canvas 上
}
}

// 开始循环绘制视频帧
video.play().then(() => {
drawFrame();
});
},
};
</script>
登录后复制
此代码片段展示了如何利用 JavaScript API 来控制 HTML5 <video> 标签的行为以及操作 <canvas> 进行图形绘制[^2]。