（一）前言

①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

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 hls.js --save

// 在页面中使用MuiPlayer

2、主要参考MuiPlayer官网：介绍 | MuiPlayer

（四）其他

1、推荐MuiPlayer，官网不用科学上网就能访问且文档易读使用方便，最主要的是它的控制条很正常；

2、后面又发现一篇使用videojs的文章，没试过，需要的可以试一下：记一次vue播放flv、hls(m3u8)视频的经历 - 掘金

文章链接

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：