vue项目兼容m3u8格式视频，h5的Android播放异常

需求：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地址
    }]
}

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

二、解决

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

VideoM3u8.vue

<template>
	 <div id="mse"></div>
</template>
<script>
 export default {
   
	 name: 'VideoM3u8',
	 components: {
   },
	 props: {
   
		 details: