在現(xiàn)今的網(wǎng)絡(luò)時代，我們已經(jīng)很習(xí)慣在各種設(shè)備上觀看視頻，比如電視，電腦，手機等等。Vue框架作為一種非常流行的前端開發(fā)框架，也提供了許多方便的方法來幫助我們更好的展示視頻。比如支持全屏播放、播放進度條調(diào)整等等。

在Vue中，我們可以通過引入第三方播放器庫來展示視頻。其中一種比較流行的庫是“vue-video-player”。這個庫可以通過npm安裝來引入到你的Vue項目中。它支持不同的視頻格式，例如mp4，m3u8等。另外，它也提供了一些方便的組件如video-player，video-ads等，這些組件可以極大的簡化我們的開發(fā)工作。

// 安裝
npm install --save vue-video-player
// 引入
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import 'videojs-flash';
import VideoPlayer from 'vue-video-player';
Vue.use(VideoPlayer);
// 使用

使用“vue-video-player”展示視頻時，我們還可以非常方便的訪問到視頻的一些實時信息，如播放進度、已經(jīng)播放時間等等。這些信息可以綁定到Vue的數(shù)據(jù)模型中，從而方便整個應(yīng)用更新與展示。下面是一個使用“vue-video-player”后綁定視頻進度的例子：

// 模板中//JS

如上面例子中所示，我們可以很方便的將視頻播放的進度綁定到Vue的數(shù)據(jù)模型中，進而方便地進行業(yè)務(wù)邏輯的編寫。在播放進度的計算和綁定中，我們采用了當(dāng)視頻加載完成后調(diào)用“videoLoaded”方法的方案。

總之，“vue-video-player”是一個非常方便、易用的播放器庫，它為我們方便、快捷的展示視頻提供了很好的支持。經(jīng)過一些微調(diào)和自定義，我們可以使用它展示出各種各樣的視頻內(nèi)容，同時也可以很好的操作視頻的狀態(tài)。