在Vue項目中，我們常常需要在頁面中插入視頻。Vue提供了一種簡單而有效的方式來插入視頻。

首先，我們需要在HTML中引入視頻，并在Vue中定義一個data屬性來存儲視頻資源。

<video src="./videos/sample.mp4" v-if="showVideo"></video>
data() {
return {
showVideo: true
}
}

然后，我們需要為視頻添加一些控制，如播放和暫停按鈕。

<video src="./videos/sample.mp4" v-if="showVideo" ref="videoPlayer"></video>
<button @click="toggleVideo">{{ isPaused ? 'Play' : 'Pause' }}</button>
data() {
return {
showVideo: true,
isPaused: false
}
},
methods: {
toggleVideo() {
const player = this.$refs.videoPlayer;
if (this.isPaused) {
player.play();
} else {
player.pause();
}
this.isPaused = !this.isPaused;
}
}

最后，為了讓視頻在頁面中適應大小，我們需要使用CSS來進行樣式設計。

.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%; // 16:9 aspect ratio
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

以上就是使用Vue插入視頻的方法。我們可以根據具體需求來調整視頻的樣式和交互方式，讓用戶體驗更加出色。