···
下载
yarn add video.js
yarn add mux.js
main.js
import Videojs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Videojs
父组件
<div
v-for="(item,index) in vedioData"
:key="index"
class="play_Video"
>
<playVideo
:Item='item'
:Index='index'
v-if='item'
class="item_Video"
/>
</div>
vedioData:[
"http://*/mag/hls/e00c8baa333c4bb4827113d4661e53d0/0/live.m3u8",
"http:///mag/hls/355156f2195f46c489e9c877bbda16f7/0/live.m3u8",
"http:///mag/hls/9521f33ac3964be5ae5ee08928bdb3b1/0/live.m3u8"
],
子组件
<template>
<!-- -->
<div class="item_Video"
v-if='Item'
>
<video
:id="`my-video${Index}`"
class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" muted
style='width: 100%;height: 100%'>
<source :src="Item" style='width: 100%;height: 100%' type="application/x-mpegURL">
</video>
</div>
</template>
export default {
props:{
Item: {
type: String,
},
Index: {
type: Number,
},
},
methods: {
initVideo() {
this.$nextTick(() => {
let myPlayer = this.$video(document.getElementById(`my-video${this.Index}`), {
//确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls: true,
autoplay: 'muted',
preload: "auto",
controlBar:{
playToggle:true
}
});
})
},
mounted() {
this.initVideo();
}