基于Vue3實現(xiàn)視頻播放與截圖功能

更新時間：2025年04月04日 09:01:15 作者：zoahxmy0929

這篇文章主要為大家詳細介紹了如何通過Vue3實現(xiàn)簡單的視頻播放與截圖功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

視頻播放

使用 HTML5 的 <video> 標簽實現(xiàn)，src 改成你自己的視頻路徑。

<video
  ref="videoRef"
  class="video-element"
  src="@/assets/video/1.mp4"
  autoplay
  loop
  muted
></video>

video 標簽基本屬性

屬性	說明
src	視頻文件路徑（支持相對/絕對路徑）
autoplay	自動播放（部分瀏覽器需配合muted屬性）
controls	顯示默認播放控制條
width/height	設置視頻顯示尺寸
muted	靜音播放
loop	循環(huán)播放
preload	預加載策略（auto/metadata/none）

視頻截圖功能實現(xiàn)

思路

視頻幀捕獲：首先，通過 <video> 元素獲取當前播放的視頻幀畫面，瀏覽器會將視頻解碼為連續(xù)的圖像幀，我們可以通過 <video> 標簽的API訪問當前顯示的幀。
Canvas 繪制轉(zhuǎn)換：創(chuàng)建一個與視頻尺寸相同的 Canvas 畫布，使用 Canvas 2D 上下文（Context2D）的 drawImage() 方法將視頻幀繪制到畫布上。
Base64 編碼輸出：調(diào)用 Canvas 的 toDataURL() 方法，將繪制好的圖像數(shù)據(jù)轉(zhuǎn)換為 Base64 編碼的圖片 URL。該方法支持指定輸出格式（如 PNG/JPEG）和質(zhì)量參數(shù)，轉(zhuǎn)換后的數(shù)據(jù)可以直接用作圖片源或下載保存。

代碼實現(xiàn)

HTML

<template>
  <div class="video-container">
    <!-- 視頻播放器 -->
    <div class="video-wrapper">
      <video
        ref="videoRef"
        class="video-element"
        src="@/assets/video/1.mp4"
        autoplay
        controls
      ></video>
    </div>
  </div>
</template>

js

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { ElMessage } from "element-plus";

const videoRef = ref(null);
const screenshotUrl = ref(""); // 截圖后的圖片URL

// 截圖功能
const scanImage = () => {
  if (!videoRef.value) return;

  try {
    // 創(chuàng)建canvas元素
    const canvas = document.createElement("canvas");
    const video = videoRef.value;

    // 設置canvas尺寸與視頻相同
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // 繪制當前視頻幀到canvas
    const ctx = canvas.getContext("2d");
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

    // 轉(zhuǎn)換為DataURL
    screenshotUrl.value = canvas.toDataURL("image/png");

    ElMessage.success("截圖成功！");
  } catch (error) {
    console.error("截圖失敗:", error);
    ElMessage.error("截圖失敗: " + error.message);
  }
};

// 快捷鍵支持 (F9截圖)
const handleKeyDown = (e) => {
  if (e.key === "F9") {
    e.preventDefault();
    scanImage();
  }
};

// 添加事件監(jiān)聽
onMounted(() => {
  window.addEventListener("keydown", handleKeyDown);
});

// 移除事件監(jiān)聽
onBeforeUnmount(() => {
  window.removeEventListener("keydown", handleKeyDown);
});
</script>

css

<style lang="scss" scoped>
.video-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.video-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background: #000;
}

.video-element {
  width: 100%;
  display: block;
}

.screenshot-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}

.screenshot-result {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.screenshot-image {
  max-width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.empty-tip {
  color: #909399;
  font-size: 14px;
  text-align: center;
  padding: 20px;
}
</style>

到此這篇關于基于Vue3實現(xiàn)視頻播放與截圖功能的文章就介紹到這了,更多相關Vue3視頻播放與截圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: