Vue 中的視頻元素在播放時會按照特定的順序進行播放，而這個順序可以根據不同的需求進行設置。下面我們將介紹 Vue 中如何設置視頻順序的方法。

<template>
<div>
<video ref="video1"></video>
<video ref="video2"></video>
</div>
</template>
<script>
export default {
mounted() {
this.$refs.video1.addEventListener('ended', () =>{
this.$refs.video2.play();
});
}
}
</script>

在上面的代碼中，我們聲明了兩個 video 元素，分別引用了 ref 為 video1 和 video2，并將它們包含在 div 元素中。接著，我們在 mounted 鉤子函數中添加了一個事件監聽器，通過監聽 video1 元素的 ended 事件，當 video1 播放結束后，會自動播放 video2。

<template>
<div>
<video ref="video1" @ended="playVideo2"></video>
<video ref="video2"></video>
</div>
</template>
<script>
export default {
methods: {
playVideo2() {
this.$refs.video2.play();
}
}
}
</script>

另外一種設置視頻順序的方法是通過在 video1 元素中設置 ended 屬性來調用一個方法。我們在上面的代碼中通過添加 @ended="playVideo2"，將 ended 事件綁定到 playVideo2 方法上，在方法中調用 video2 的播放方法即可。

<template>
<div>
<video ref="video1"></video>
<video ref="video2"></video>
</div>
</template>
<script>
export default {
data() {
return {
playOrder: ['video1', 'video2']
}
},
mounted() {
this.playVideo();
},
methods: {
playVideo() {
const videoToPlay = this.playOrder.shift();
this.$refs[videoToPlay].play();
this.$refs[videoToPlay].addEventListener('ended', () =>{
this.playVideo();
});
this.playOrder.push(videoToPlay);
}
}
}
</script>

最后一種設置視頻順序的方法是通過使用數組來控制視頻的播放順序。我們在 data 中定義了一個 playOrder 數組，里面存放了 video1 和 video2 的引用順序。在 mounted 鉤子函數中，我們調用了 playVideo 方法，它會根據數組中的順序依次播放視頻，并在每個視頻播放結束后，執行 playVideo 方法。這樣我們就可以自由地控制視頻的播放順序了。