这里是Vue结合Video.js播放m3u8视频流的完整攻略:
使用npm安装Video.js:
npm install video.js --save
在Vue的App.vue
中引入Video.js和CSS文件:
<template>
<div>
<video
id="myPlayer"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="640"
height="264"
>
<source :src="sourceUrl" type="application/x-mpegURL" />
</video>
</div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
name: "App",
data() {
return {
sourceUrl: "http://example.com/example.m3u8",
};
},
mounted() {
this.player = videojs("myPlayer", {
fluid: true,
autoplay: true,
});
},
destroyed() {
if (this.player) {
this.player.dispose();
}
},
};
</script>
以上代码创建了一个Video.js播放器,这里设置了视频源的URL为http://example.com/example.m3u8。
<template>
<div>
<video
id="myPlayer"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
width="640"
height="264"
>
<source :src="sourceUrl" type="application/x-mpegURL" />
</video>
<button @click="changeVideoSource">change video source</button>
</div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
name: "App",
data() {
return {
sourceUrl: "http://example.com/example.m3u8",
};
},
mounted() {
this.player = videojs("myPlayer", {
fluid: true,
autoplay: true,
});
},
destroyed() {
if (this.player) {
this.player.dispose();
}
},
methods: {
changeVideoSource() {
this.sourceUrl = "http://example.com/new_example.m3u8";
this.player.src(this.sourceUrl);
},
},
};
</script>
以上代码添加了一个按钮,当点击按钮时,会动态修改视频源的URL。在Vue中,使用:src
绑定视频源,通过修改数据绑定的sourceUrl
属性来动态改变视频源。同时,在changeVideoSource
方法中,使用player.src
方法将新的URL设置为视频的源。
本文链接:http://task.lmcjl.com/news/8415.html