vue项目兼容m3u8格式视频，h5的Android播放异常_videojs m3u8格式移动端兼容性

需求：h5项目中（app内嵌页面）和b端管理系统需要兼容m3u8格式的视频

在h5页面的ios端不需要适配，苹果自动做出了兼容

一、问题（h5的android）

1.百度的方法：默认引入的vue-video-player不支持直接播放m3u8格式的视频，还需安装 videojs-contrib-hls 才能播放hls流

import Vue from "vue";
import "video.js/dist/video-js.css"; // css
import hls from "videojs-contrib-hls"; // 重点：hls流需要的插件
Vue.use(hls);

playerOptions:{
	hls:true,
	sources: [{
        type: "application/x-mpegURL", // 类型
        src: 'http:xx.m3u8'// url地址
    }]
}
1
2
3
4
5
6
7
8
9
10
11
12

不知道引入时还有啥具体要求，结果就是 每次视频中剪辑插入的每个小章节标题的部分不播放，动态标题这几秒会暂停播放，卡在某一帧,过了标题部分，依然正常播放

二、解决

最后通过引入西瓜播放器来解决了,下面是兼容m3u8的代码，如需使用，直接引入以下组件即可

VideoM3u8.vue

<template>
	 <div id="mse"></div>
</template>
<script>
 export default {
	 name: 'VideoM3u8',
	 components: {},
	 props: {
		 details: {
		 	type: Object,
		 },
	 },
	 data() {
		 return {
			 playerOptions: {
				 id: "mse",
				 url: '',
				 lang: "zh-cn",
				 fluid: true,
				 playsinline: true,
				 useHls: !isIos,//=======记得判断非ios,
				 closeVideoClick: true,
				 closeVideoDblclick: true,
				 closeVideoTouch: true,
				 poster: '',
				 definitionActive: "click",
				 autoplay: true,
				 autoplayMuted: true,
				 volume: 0,//音量
				 'x5-video-player-type': 'h5',
				 errorTips: '此视频暂无法播放，请稍后再试'
			 },
		 }
	 },
	 watch: {
		 details: {
			 handler(options) {
			 	const poster = options.videoCoverImageUrl || options.coverImage169Url;
			 	this.videoPoster = poster
				this.$set(this.playerOptions, "url", options.videoUrl);
				this.$set(this.playerOptions, "poster", poster);
			 },
			deep: true,
		 	immediate: true
		 }
	 },
	created() {
		if (!!window.Player && !!window.HlsJsPlayer) {
		 	//
		 } else {
		 	//先确保引入西瓜视频sdk，再初始化配置
			  this.loadView("https://p5-tklifemhs-hpage-1305510423.cos.ap-beijing.myqcloud.com/js/xgplayer.js",() => {
				 	this.loadView( "https://p5-tklifemhs-hpage-1305510423.cos.ap-beijing.myqcloud.com/js/xgplayer-hls.js",() => {
						this.initPlayer();
			 		});
				});
		 	}
 	},
 	methods: {
	 	initPlayer(url, img, ios) {
	 		this.videoPlayer = new HlsJsPlayer(this.playerOptions)
	 	},
	 	loadView(b, callback) {
			 const s = document.createElement("script");
			 s.type = "text/javascript";
			 s.src = b;
			 s.onload = s.onreadystatechange = function () {
				 if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete"){
				 	callback && callback();
					s.onload = s.onreadystatechange = null;
				 }
			 };
			document.body.appendChild(s);
	 	},
 	}
 }
</script>
<style lang="stylus" scoped>
 .vjs-custom-skin /deep/ .video-js {
 font-size: 20px;
 .vjs-control-bar {
 font-size: 28px;
 }
 .vjs-mute-control {
 padding-left: 0;
 }
 .vjs-progress-holder {
 height: 0.35em;
 }
 .vjs-play-progress:before {
 top: -0.23em;
 }
 }

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95