index.html引入样式文件
这里用的是在线链接,也可以把它转成本地文件引入
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet" />
组件中html代码
<div>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'
style='width: 100%;height: auto'>
<source id="source" src="http://xxxxxx/openUrl/DIwGl32/live.m3u8" type="application/x-mpegURL">
</source>
</video>
</div>
组件中文件引入
在vue中需要把在线文件转为本地文件,再去引入
地址:https://unpkg.com/video.js/dist/video.js
注意:这里需要把videojs拿出来,不然下面用不了
import { videojs } from './video.js'
调用方法
在组件挂载之后调用方法
mounted(){
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
})
myVideo.play()
var changeVideo = function(vdoSrc) {
if (/\.m3u8$/.test(vdoSrc)) {
myVideo.src({
src: vdoSrc,
type: 'application/x-mpegURL'
})
} else {
myVideo.src(vdoSrc)
}
myVideo.load();
myVideo.play();
}
}