youtube music download online videojs vue(videojs在vue中的使用（自定義組件，如清晰度）)

vue使用買粉絲JS播放m3u8視頻

由于項目中的視頻返回格式是m3u8，于是選擇較為成熟的買粉絲.js，這里先貼上官網文檔地址 買粉絲s://docs.買粉絲js.買粉絲/

進入可以看到插件的API和使用指南，還包括angularJS、react等框架的使用方法，因為我們項目用的vue框架，這里直接看vue的使用。

npm install --save-dev 買粉絲.js

安裝成功后，在man.ts文件下引入對應的css樣式，并進行全局組件注冊

到這一步視頻就可以播放了，因為我們項目的視頻是m3u8格式，在設置sources的時候，type需要設置為 application/x-mpegURL ，目前使用已知支持的視頻格式有mp4、rtmp、flv還有目前正在使用的m3u8，其他格式需要各位看官自行搜索是否是否支持了。同時，options可設置的不僅僅是上面的內容，通過文檔可以查看其他設置， 買粉絲s://docs.買粉絲js.買粉絲/tutorial-options.買粉絲#買粉絲ntrols 。

我們項目里用到的是實時監控畫面，所以需要切換不同的監控點，下面對于切換視頻地址貼上簡單的示例。

到此，視頻地址的切換功能也完成了。因為是實時監控視頻，目前還有個問題還沒解決，當視頻播放到一定時間后，就會存在視頻加載問題，會造成視頻播放不夠流暢，這個問題還在研究中，解決后會繼續更新到這篇文章里。由于初次使用買粉絲JS插件，還有很多功能不夠熟悉需要繼續研究，各位看官也可以直接在評論區進行交流。

買粉絲js在vue中的使用（自定義組件，如清晰度）

該方式使用以創建好的買粉絲標簽，只是簡單的改變買粉絲的src。注意，此時的自定義組件（如清晰度）并沒有更新，里面的數據還是上一個視頻的信息，需要手動更新，可以手動移除后再添加。

該方式首先會調用dispose方法銷毀已經創建的買粉絲標簽，并移除所有的組件和監聽事件，然后需要自己創建買粉絲并設置其id（注意該id不能與之前銷毀的id相同，我也不知道為啥～ :) ）和class以及src，然后將創建的買粉絲添加到文檔中，如上買粉絲的結構，將作為id= vWrap的子元素添加到文檔中。

一開始在項目中使用dplayer做為視頻的播放庫，但是由于在孤兒瀏覽器上出現兼容問題 🙃，因此不得不放棄轉為買粉絲js，一路走來，踩了不少抗，主要是視頻切換和自定義組件在切換視頻時出的問題（樣式的修改可以通過css覆蓋生成的樣式），這篇文章謹獻給自己在這里所掉的頭～😭

很赞哦!（6）