vue使用video.js進行視頻播放功能
更新時間：2019年07月18日 08:35:42 作者：MiaoWu
video.js是一個擁有h5背景的網(wǎng)絡視頻播放器，同時支持h5以及Flash視頻播放，這篇文章主要介紹了vue中使用video.js進行視頻播放,需要的朋友可以參考下
關于video.js
video.js是一個擁有h5背景的網(wǎng)絡視頻播放器，同時支持h5以及Flash視頻播放（可加載本地靜態(tài)資源視頻以及網(wǎng)絡鏈接視頻）
官網(wǎng)：videojs.com/
安裝
npm install video.js
main.js中引入
import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$video = Video
使用
<div class="demo1-video"> <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls //確定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。 autoplay: "muted", // //自動播放屬性,muted:靜音播放 preload="auto" //建議瀏覽器是否應在<video>加載元素后立即開始下載視頻數(shù)據(jù)。 poster="../assets/img/E0531.jpg"> //設置視頻封面 <source src="../assets/video/E0531.mp4" type="video/mp4" > //視頻地址 </video> </div>
可以直接使用css來控制video的寬高
實現(xiàn)的效果截圖
以上：對于video.js的一次簡單應用就完成啦
總結
以上所述是小編給大家介紹的vue使用video.js進行視頻播放功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了vue3.0中的computed寫法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
對于Vue項目來說，如果遇到一個埋點的需求，我們最好的解決方案就是封裝一個指令，所以本文就來和大家詳細講講具體是如何封裝埋點指令的吧2023-08-08
這篇文章主要為大家詳細介紹了如何使用Vue實現(xiàn)色板功能，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以了解一下2023-06-06
我們知道ref可以用于創(chuàng)建一個響應式數(shù)據(jù),而toRef也可以創(chuàng)建一個響應式數(shù)據(jù),這篇文章主要給大家介紹了關于Vue3中ref與toRef區(qū)別的相關資料,需要的朋友可以參考下2021-06-06
vue2封裝webSocket的實現(xiàn)(開箱即用)
在Vue2中,可以使用WebSocket實時通信,本文主要介紹了vue2封裝webSocket的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-08-08
vue2中使用echarts實現(xiàn)中國地圖、在中國地圖上標注坐標散點圖的操作代碼
這篇文章主要介紹了vue2中使用echarts實現(xiàn)中國地圖、在中國地圖上標注坐標散點圖,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2024-05-05
element-ui 中的 loading 加載功能,默認是全屏加載效果,設置局部,需要自定義樣式或者修改樣式,下面給大家分享實例代碼,感興趣的朋友跟隨小編一起看看吧2024-05-05
Vue2 Element Schema Form 配置式生成表單的實現(xiàn)
本文主要介紹了Vue2 Element Schema Form 配置式生成表單的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
詳解vue中使用transition和animation的實例代碼
這篇文章主要介紹了詳解vue中使用transition和animation的實例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了詳解從Vue-router到html5的pushState，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07