FLVJS 是一個基于 HTML5 的 FLV 視頻播放器插件,它可以讓你通過簡單的 JavaScript 代碼來嵌入 FLV 類型的視頻到你的網頁中。這個插件最初是由 Bilibili 開源,如今已經在全球范圍內得到了廣泛的應用。
如今,Vue 已經成為了最受歡迎的前端框架之一,它的簡潔、高效的編碼方式得到了廣大開發者的歡迎。而如果你正在開發一個 Vue 項目,并且需要嵌入 FLV 類型的視頻,那么 FLVJS Vue 就是一個可以讓你事半功倍的解決方案。
npm install flv.js
npm install vue-flv-player
首先,我們需要在項目中安裝 FLVJS 和 Vue-FLV-Player 兩個依賴包。接著,我們可以通過以下方式來引入 Vue-FLV-Player 插件。
<template>
<flv-player v-model="url"></flv-player>
</template>
<script>
import FlvPlayer from 'vue-flv-player'
export default {
components: { FlvPlayer },
data() {
return { url: 'you_flv_video_url' }
},
created() {
this.$flvjs.on(this.url, flvjs.Events.LOADING_COMPLETE, () =>{
console.log('LOADING_COMPLETE')
})
},
}
</script>
最后,我們需要在 Vue 實例對象的?created?鉤子函數中,使用?$flvjs?來監聽事件,實現 FLV 視頻的自定義功能。
在這里,我們可以看到,使用 FLVJS Vue 播放 FLV 視頻非常的簡單,而且還可以實現各種自定義功能。無論是在個人博客網站還是企業級應用中,FLVJS Vue 都可以為您帶來便捷、高效的使用體驗。