Vue播放m3u8各种实现方式
video.js -HTML5 视频播放器
dplayer官网
VLC 官网
插件 videojs
安装 videojs 插件
npm install --save video.js
导入插件
//全局导入，在main.js中导入
import videojs from "video.js";
import "video.js/dist/video-js.css";
Vue.prototype.$videojs = videojs
//局部导入，在对应文件导入（可选）
import videojs from "video.js";
import "video.js/dist/video-js.css";
使用
<template>
<div class="myVideo">
<video :id="id" class="video-js" preload="auto" controls playsinline autoplay="autoplay">
<source :src="url" type="application/x-mpegURL" />
</video>
</div>
</template>
<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
name: 'HelloWorld',
data() {
return {
db: null,
options: {
autoplay: false, // 设置自动播放
muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
preload: "auto", // 预加载
controls: true, // 显示播放的控件
},
id: `videoPlayer${Date.now()}`,
url: "https://live.cgtn.com/1000/prog_index.m3u8", // 播放视频的路径'
};
},
mounted() {
// 使用 $nextTick 解决vedio报错 The element or ID supplied is not valid. (videojs)
this.$nextTick(() => {
this.loadVideo(this.url);
});
},
methods: {
loadVideo(url) {
this.db = videojs(this.id, this.options);
// 也可以使用以下方式给vedio设置 src
this.db.src([
{
src: url, // 地址
type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
},
]);
},
// 销毁
beforeDestroy() {
if (this.db) {
this.db.dispose(); // dispose()会直接删除Dom元素
}
},
}
}
</script>
<style scoped>
.myVideo {
width: 100%;
}
video {
width: 100%;
height: auto;
}
</style>
插件 dplayer + hls
安装 videojs 插件
npm install -S dplayer
// 安装hls.js，播放Hls必须使用
npm install -S hls.js
导入插件
import Hls from "hls.js";
import DPlayer from "dplayer";
使用
<template>
<div class="myVideo">
<div ref="player" class="dplayer"></div>
</div>
</template>
<script>
import Hls from "hls.js";
import DPlayer from "dplayer";
export default {
data() {
return {
dp: null,
value: undefined,
img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg", // 视频封面
url: "https://e-sign.dms.t.cn-np.com/files/m3u8_file/c4b94118-3c8d-4410-9987-985c2b44c278/c4b94118-3c8d-4410-9987-985c2b44c278.m3u8", // 播放视频的路径'
};
},
created() {
this.$nextTick(() => {
this.loadVideo(this.url);
});
},
methods: {
// 播放器从开始下载到可以播放，dplayer延续H5 video的事件，依次会触发loadstart、durationchange、loadedmetadata、loadeddata、progress、canplay、canplaythrough。
// 虽然直觉上是监听canplay，但是canplay在iOS上行不通，只能使用loadedmetadata。
loadVideo(url) {
this.dp = new DPlayer({
element: this.$refs.player,
loop: false,
autoplay: true,
video: {
pic: this.img, // 封面
url: url,
type: "customHls",
customType: {
customHls: function (video, player) {
console.log(player);
const hls = new Hls();
// 监听Hls.Events.ERROR事件，
// DNS解析、下载超时，都会触发manifestLoadError错误
hls.on(Hls.Events.ERROR, function (eventName, data) {
// 埋点上报，可以追踪data.details
// track()
})
hls.loadSource(video.src);
hls.attachMedia(video);
},
},
}
});
// 监听loadedmetadata事件
this.dp.on('loadedmetadata', function () {
// 埋点上报
// track()
})
},
},
// 销毁
beforeDestroy() {
if (this.dp) {
this.dp = null
}
},
};
</script>
<style scoped>
.myVideo {
width: 100%;
}
.dplayer {
width: 100%;
height: auto;
}
</style>
插件 hls
安装 videojs 插件
// 安装hls.js，播放Hls必须使用
npm install -S hls.js
导入插件
import Hls from "hls.js";
使用
<template>
<div class="myVideo">
<video class="hlsCss" ref="video" controls></video>
</div>
</template>
<script>
let Hls = require('hls.js');
export default {
data() {
return {
hls: ''
};
},
mounted() {
this.getStream('https://live.cgtn.com/1000/prog_index.m3u8');
},
methods: {
loadVideo(val) {
this.videoPause();
this.getStream(val)
},
videoPause() {
if (this.hls) {
this.$refs.video.pause();
this.hls.destroy();
this.hls = null;
}
},
getStream(source) {
if (Hls.isSupported()) {
this.hls = new Hls();
this.hls.loadSource(source);
this.hls.attachMedia(this.$refs.video);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
console.log('加载成功');
this.$refs.video.play();
});
this.hls.on(Hls.Events.ERROR, (event, data) => {
console.log(event, data);
// 监听出错事件
console.log('加载失败');
});
}
},
beforeDestroy() {
this.videoPause();
}
}
};
</script>
<style scoped>
.myVideo {
width: 100%;
}
.hlsCss {
width: 100%;
height: auto;
}
</style>