环境配置
"element-plus": "^2.2.12",
"video.js": "^7.20.1",
"vue": "^3.2.37",
子组件 Video.vue
<template>
<video ref="myPlay" class="video-js"></video>
</template>
<script>
import { ref, reactive, toRefs, onMounted, onBeforeMount } from "vue";
import "video.js/dist/video-js.css";
import videojs from "video.js";
export default {
setup () {
let player = null; // 妈的vue有bug 这个写成响应式数据 切换video地址会加载不出来
let myPlay = ref(null);
let init = reactive({
options: {
autoplay: 'auto',
controls: true,
fill: true, // 填充模式
},
})
onMounted(() => {
player = videojs(myPlay.value, init.options)
player.on("loadstart", function () {
console.log("开始请求数据 ");
});
player.on("progress", function () {
console.log("正在请求数据 ");
});
player.on("loadedmetadata", function () {
console.log("获取资源长度完成 ");
});
player.on("canplaythrough", function () {
console.log("视频源数据加载完成");
});
player.on("waiting", function () {
console.log("等待数据");
});
player.on("play", function () {
console.log("视频开始播放");
});
player.on("playing", function () {
console.log("视频播放中");
});
player.on("pause", function () {
console.log("视频暂停播放");
});
player.on("ended", function () {
console.log("视频播放结束");
});
player.on("error", function () {
console.log("加载错误");
});
player.on("seeking", function () {
console.log("视频跳转中");
});
player.on("seeked", function () {
console.log("视频跳转结束");
});
player.on("ratechange", function () {
console.log("播放速率改变");
});
player.on("timeupdate", function () {
console.log("播放时长改变");
});
player.on("volumechange", function () {
console.log("音量改变");
});
player.on("stalled", function () {
console.log("网速异常");
});
})
function initVideo(opt) {
player.src(opt)
player.play()
}
onBeforeMount (() => {
if(player) player.dispose()
})
return {
myPlay,
...toRefs(init),
initVideo
}
}
}
</script>
父组件
<template>
<h1>Videojs</h1>
<div class="video-box">
<VideoPlayer ref="videoPlayer"></VideoPlayer>
</div>
<el-button type="primary" @click="one">第一节</el-button>
<el-button type="success" @click="two">第二节</el-button>
</template>
<script>
import VideoPlayer from "@/components/Video.vue"
import { ref } from "vue";
export default {
name: "demo3",
components: {VideoPlayer},
setup() {
let videoPlayer = ref(null);
function one() {
videoPlayer.value.initVideo({
src: 'https://phonetx.qing.mgtv.com/nn_live/nn_x64/cWlkPSZzPWM0MzIyYzM4ZjY0ZTBkZjQwOWM5MDA2NGRiMjQ5NDY3JmVzPTE2NjAxMjU4MjcmdXVpZD02YTYwM2ExMzk5ODdmNTExZTEzYjZjOTFhM2NjOWJmYy02ZWI5MTEwZCZ2PTImYXM9MCZjZG5leF9pZD10eF9waG9uZV9saXZl/KLGMPP360.m3u8',
type: 'application/x-mpegURL'
})
}
function two() {
videoPlayer.value.initVideo({
src: 'https://vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4'
})
}
return {
videoPlayer,
one,
two
};
},
};
</script>
<style lang="less" scoped>
.video-box {
width: 600px;
height: 300px;
background-color: aquamarine;
}
</style>
