Vue實現視頻播放列表（一）——video.js組件的使用

video.js組件官網——https://www.npmjs.com/package/video.js

1、安裝

引入video.js組件

npm install --save-dev video.js

或

cnpm install --save-dev video.js

然后在main.js中引用

import Video from 'video.js' import 'video.js/dist/video-js.css' Vue.prototype.$videos = Video

引用完成后我們就可以做視頻列表了

2、基本使用-示例

視頻地址鏈接

https://docs.egret.com/engine/img/engine2d.mp4
https://vjs.zencdn.net/v/oceans.mp4

index.vue

<videoid="my-player"class="video-js"controlspreload="auto"poster="//vjs.zencdn.net/v/oceans.png"data-setup='{}'><source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source><source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source><source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to aweb browser that<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video>

3、實例

index.vue

<div><videoid="my-player"class="video-js"controlspreload="auto"poster="//vjs.zencdn.net/v/oceans.png"data-setup="{}"><sourcesrc="./video.mp4"type="video/mp4"><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to aweb browser that<ahref="https://videojs.com/html5-video-support/"target="_blank">supports HTML5 video</a></p></video> </div><style>video#my-player.video-js {width: 94%;height: 100%;} </style>

4、效果

總結

以上是生活随笔為你收集整理的Vue实现视频播放列表（一）——video.js组件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。