基于Vue3实现视频播放与截图功能

伯斌

视频播放

使用

1. HTML5

复制代码

的

1. <video>

复制代码

标签实现，

1. src

复制代码

改成你自己的视频路径。

1. <video
   
2.   ref="videoRef"
   
3.   class="video-element"
   
4.   src="@/assets/video/1.mp4"
   
5.   autoplay
   
6.   loop
   
7.   muted
   
8. ></video>

复制代码

video 标签基本属性

属性说明src视频文件路径（支持相对/绝对路径）autoplay自动播放（部分浏览器需配合muted属性）controls显示默认播放控制条width/height设置视频显示尺寸muted静音播放loop循环播放preload预加载策略（auto/metadata/none）
视频截图功能实现


思路

• 视频帧捕获：首先，通过
  1. <video>

  复制代码
  元素获取当前播放的视频帧画面，浏览器会将视频解码为连续的图像帧，我们可以通过
  1. <video>

  复制代码
  标签的API访问当前显示的帧。
  
• Canvas 绘制转换：创建一个与视频尺寸相同的
  1. Canvas

  复制代码
  画布，使用
  1. Canvas 2D

  复制代码
  上下文（
  1. Context2D

  复制代码
  ）的
  1. drawImage()

  复制代码
  方法将视频帧绘制到画布上。
  
• Base64 编码输出：调用
  1. Canvas

  复制代码
  的
  1. toDataURL()

  复制代码
  方法，将绘制好的图像数据转换为
  1. Base64

  复制代码
  编码的图片
  1. URL

  复制代码
  。该方法支持指定输出格式（如
  1. PNG/JPEG

  复制代码
  ）和质量参数，转换后的数据可以直接用作图片源或下载保存。
  

代码实现

HTML

1. <template>
   
2.   <div class="video-container">
   
3.     <!-- 视频播放器 -->
   
4.     <div class="video-wrapper">
   
5.       <video
   
6.         ref="videoRef"
   
7.         class="video-element"
   
8.         src="@/assets/video/1.mp4"
   
9.         autoplay
   
10.         controls
    
11.       ></video>
    
12.     </div>
    
13.   </div>
    
14. </template>

复制代码

js

1. <script setup>
   
2. import { ref, onMounted, onBeforeUnmount } from "vue";
   
3. import { ElMessage } from "element-plus";
   
4. 
   
5. const videoRef = ref(null);
   
6. const screenshotUrl = ref(""); // 截图后的图片URL
   
7. 
   
8. // 截图功能
   
9. const scanImage = () => {
   
10.   if (!videoRef.value) return;
    
11. 
    
12.   try {
    
13.     // 创建canvas元素
    
14.     const canvas = document.createElement("canvas");
    
15.     const video = videoRef.value;
    
16. 
    
17.     // 设置canvas尺寸与视频相同
    
18.     canvas.width = video.videoWidth;
    
19.     canvas.height = video.videoHeight;
    
20. 
    
21.     // 绘制当前视频帧到canvas
    
22.     const ctx = canvas.getContext("2d");
    
23.     ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    
24. 
    
25.     // 转换为DataURL
    
26.     screenshotUrl.value = canvas.toDataURL("image/png");
    
27. 
    
28.     ElMessage.success("截图成功！");
    
29.   } catch (error) {
    
30.     console.error("截图失败:", error);
    
31.     ElMessage.error("截图失败: " + error.message);
    
32.   }
    
33. };
    
34. 
    
35. // 快捷键支持 (F9截图)
    
36. const handleKeyDown = (e) => {
    
37.   if (e.key === "F9") {
    
38.     e.preventDefault();
    
39.     scanImage();
    
40.   }
    
41. };
    
42. 
    
43. // 添加事件监听
    
44. onMounted(() => {
    
45.   window.addEventListener("keydown", handleKeyDown);
    
46. });
    
47. 
    
48. // 移除事件监听
    
49. onBeforeUnmount(() => {
    
50.   window.removeEventListener("keydown", handleKeyDown);
    
51. });
    
52. </script>

复制代码

css

1. <style lang="scss" scoped>
   
2. .video-container {
   
3.   padding: 20px;
   
4.   max-width: 800px;
   
5.   margin: 0 auto;
   
6. }
   
7. 
   
8. .video-wrapper {
   
9.   position: relative;
   
10.   border-radius: 8px;
    
11.   overflow: hidden;
    
12.   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
13.   background: #000;
    
14. }
    
15. 
    
16. .video-element {
    
17.   width: 100%;
    
18.   display: block;
    
19. }
    
20. 
    
21. .screenshot-controls {
    
22.   position: absolute;
    
23.   bottom: 20px;
    
24.   right: 20px;
    
25.   z-index: 10;
    
26. }
    
27. 
    
28. .screenshot-result {
    
29.   display: flex;
    
30.   justify-content: center;
    
31.   align-items: center;
    
32.   min-height: 300px;
    
33. }
    
34. 
    
35. .screenshot-image {
    
36.   max-width: 100%;
    
37.   border: 1px solid #ebeef5;
    
38.   border-radius: 4px;
    
39. }
    
40. 
    
41. .empty-tip {
    
42.   color: #909399;
    
43.   font-size: 14px;
    
44.   text-align: center;
    
45.   padding: 20px;
    
46. }
    
47. </style>

复制代码

到此这篇关于基于Vue3实现视频播放与截图功能的文章就介绍到这了,更多相关Vue3视频播放与截图内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！