在 Vue 中插入本地視頻可以通過使用標簽來實現。你可以將視頻文件放在你的項目中的合適位置（比如assets文件夾），然后在 Vue 組件中引用這個視頻文件。html同理

1. 首先，在你的 Vue 項目中的assets文件夾下放入你的視頻文件，比如video.mp4。
2. 在你的 Vue 組件中，可以像這樣引用這個本地視頻文件

<template><div><video width="320" height="240" controls><source src="@/assets/video.mp4" type="video/mp4">Your browser does not support the video tag.</video></div>
</template><script>
export default {name: 'VideoComponent'
}
</script>

controls屬性是一個布爾屬性。
如果存在，則指定應顯示視頻控件。
視頻控件應包括：

播放
暫停
定位
音量
全屏切換
字幕/字幕（如果有）
跟蹤（如果可用）

1.Video標簽屬性

我們來一起看看 標簽的常用屬性：

controls： 如果 controls 屬性被聲明，瀏覽器將提供一個包含聲音、播放進度、播放暫停的控制面板，讓用戶可以控制視頻的播放。

width & height： 視頻顯示區域的寬度和高度。

poster： 海報幀圖片 URL，用于在視頻處于下載中的狀態時顯示。如果未指定 poster 屬性，則在視頻第一幀可用之前不會顯示任何內容，然后將視頻的第一幀作為海報幀來顯示。

autoplay： 如果 autoplay 屬性被聲明，視頻會盡快自動播放，不會等待整個視頻文件下載完成。

autopictureinpicture： 如果 autopictureinpicture 屬性被聲明，那么當用戶在當前頁面和另一個頁面或應用程序之間來回切換時，會自動切換畫中畫模式。

disablepicutreinpicture： 如果 disablepictureinpicture 屬性被聲明，則禁用了畫中畫模式。

loop： 如果 loop 屬性被聲明，將循環播放視頻。

muted： 如果 muted 屬性被聲明，視頻將被靜音。

preload： preload 屬性的值示意了瀏覽器使用何種加載方式以達到最好的用戶體驗。它的值可以是 none （視頻不會被緩存）、 meta （獲取例如視頻長度的視頻元數據）或 auto （整個視頻都將被加載）。如果 autoplay 屬性已經被聲明時， preload 屬性將被忽略。

playsinline： 如果 playsinline 屬性被聲明，視頻將在元素的播放區域內播放。

disableRemotePlayback： 如果 disableRemotePlayback 屬性被聲明，瀏覽器將禁用遠程設備上進行進度控制的能力。

2.視頻文件格式

HTML 支持 3 種視頻文件格式： MP4、 WebM 和 OGG。
MP4： MP4 對比 WebM 有更高的視頻質量。

WebM: WebM 是在舊版本電腦上也可以保證高質量的視頻文件，但在移動端 和播放器上的兼容性較差。

OGG： OGG 是一個自由且開放標準的多媒體文件格式，可以納入各式各樣自由和開放源代碼的編解碼器，包含音效、視頻、文字（例如字幕）與元數據的處理。

<video controls width="300"><!-- MP4 文件 --><source src="video.mp4" type="video/mp4" /><!-- WebM 文件 --><source src="video.webm" type="video/webm" /><!-- OGG 文件 --><source src="video.ogg" type="video/ogg" />
</video>