（一）前言
①uniapp项目，运行在手机浏览器端，需要播放m3u8类型视频。在网上找了好久教程，记录一下实现过程。
②最开始使用的是videojs，后来改用MuiPlayer，两种方式都记一下。
③m3u8就是hls 。
④在线播放m3u8视频： https://m3u8play.com/、http://tool.liumingye.cn/m3u8/（第一个播放速度比较快）
⑤用来测试的m3u8视频地址：https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8
（二）使用videojs实现
1、使用步骤
// 安装videojs
npm install --save-dev video.js
// 在main.js中加以下三行代码
import Videojs from '!video.js' // 一定要加!
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Videojs// 页面使用videojs
<template>
<view>
<div id="app">
<div class="video-js" ref="videos"></div>
</div>
</view>
</template>
<script>
export default {
mounted() {
let video = document.createElement('video');
video.id = 'video';
// video.style = 'width: 100%; height: 100%;';
// video.controls = true;
video.preload = "auto"
video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
let source = document.createElement('source');
source.src = 'http://183.167.196.100:83/openUrl/wqzaTza/live.m3u8';
video.appendChild(source);
// return
this.$refs.videos.appendChild(video);
let that = this;
let player = this.$video(
'video',
{
autoDisable: true,
preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
language: 'zh-CN',
fluid: true, // 自适应宽高
muted: false, // 是否静音
aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
autoplay: false, //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
loop: true, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
controlBar: {
volumePanel: { //声音样式
inline: true // 不使用水平方式
},
timeDivider: true, // 时间分割线
durationDisplay: true, // 总时间
progressControl: true, // 进度条
remainingTimeDisplay: true, //当前以播放时间
fullscreenToggle: true, //全屏按钮
pictureInPictureToggle: false, //画中画
}
},
function() {
this.on('error', function(err) { //请求数据时遇到错误
console.log("请求数据时遇到错误", err)
});
this.on('stalled', function(stalled) { //网速失速
console.log("网速失速", stalled)
});
}
);
}
}
</script>
<style>
#app {
width: 100vw;
height: 100vh;
}
</style>
2、参考：videojs官网、uni-app npm方式引入video.js教程 支持H5播放m3u8、mp4等格式视频文件_uniapp video.js-CSDN博客
3、未解决问题：项目运行在pc端的谷歌浏览器，可以展示视频，但是控制条样式比较丑，而且不显示时间条，代码中已经加了时间条的东西，但是还是不显示，也没有成功改掉控制条样式。
（三）使用MuiPlayer实现
1、使用步骤
// 安装MuiPlayer
npm i mui-player --save
npm install flv.js --save// 在页面中使用MuiPlayer
<template>
<view>
<div id="mui-player"></div>
</view>
</template>
<script>
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player';
import Hls from 'hls.js'
export default {
data() {
return {
mp:null,
};
},
onShow(){
this.$nextTick(()=>{
// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
this.mp = new MuiPlayer({
container:document.getElementById("mui-player"),
src:'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
parse:{
type:'hls',
loader:Hls,
config:{ // hls config to：https://github.com/video-dev/hls.js/blob/HEAD/docs/API.md#fine-tuning
debug:false,
},
},
pageHead:false,
});
})
},
onUnload(){
this.mp.destroy()
},
}
</script>
2、主要参考MuiPlayer官网：介绍 | MuiPlayer
（四）其他
1、推荐MuiPlayer，官网不用科学上网就能访问且文档易读使用方便，最主要的是它的控制条很正常；
2、后面又发现一篇使用videojs的文章，没试过，需要的可以试一下：记一次vue播放flv、hls(m3u8)视频的经历 - 掘金