Vue.js是一個流行的JavaScript框架，它可以輕松地實現數據綁定和組件化開發。對于開發者來說，Vue.js的一個非常重要的應用場景就是視頻播放。

在Vue.js中，我們可以使用第三方的視頻播放庫來實現視頻播放。其中比較出名的有Video.js和Plyr。這兩個庫都非常適合在Vue.js中使用，我們只需要在Vue.js中引用這些庫就可以輕松地實現視頻播放功能。

import videojs from 'video.js'
import 'video.js/dist/video-js.css'

上面的代碼就是引入Video.js的方式。在Vue.js中，我們可以使用組件來實現視頻播放。下面是一個簡單的視頻播放組件。

<template>
<div>
<video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264">
<source :src="url" type='video/mp4'>
</video>
</div>
</template>
<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
props: {
url: String
},
mounted() {
// 頁面加載完成后初始化視頻播放器
const player = videojs(this.$refs.videoPlayer)
player.play()
}
}
</script>

在上面的代碼中，我們使用了Video.js來實現視頻播放。需要注意的是，我們給video標簽添加了一個ref屬性，這樣我們可以在Vue.js中通過this.$refs.videoPlayer來訪問到這個video元素。這個元素會在 mounted 生命周期中初始化成一個Video.js實例。

在這個示例中，我們還使用了一個props屬性來傳遞視頻的URL地址。在使用組件時，我們只需要傳入視頻URL即可：

<VideoPlayer url="http://example.com/video.mp4" />

通過上面的代碼，我們就可以在Vue.js中實現一個簡單的視頻播放組件。通過引入Video.js，我們可以輕松地添加更多的功能和UI控件，來提升視頻播放的體驗。