# 基于MuiPlayer的Uniapp播放器

**Repository Path**: nigfire/Uniapp-MuiPlayer

## Basic Information

- **Project Name**: 基于MuiPlayer的Uniapp播放器
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-07-10
- **Last Updated**: 2025-07-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MuiPlayer UniApp 使用 Demo

简述一下业务需求，仅仅是需要在H5页面播放m3u8格式的视频，但是Uniapp官方提供的video组件在H5端不支持m3u8格式的视频播放，所以需要使用第三方库来播放，这里我使用的是MuiPlayer，但是貌似MuiPlayer的官方文档没有过多提及UniApp的用法，由于MuiPlayer默认支持mp4格式播放，所以我就自己扩展了m3u8格式和flv格式的播放。，所以这里记录一下使用方法，希望对大家有所帮助。

提示一下：代码拉下来需要执行下面两条命令。

## 1.安装 MuiPlayer

官方网站：
```
https://muiplayer.js.org/zh/
```


使用 npm 安装：

``` shell
npm i mui-player --save
```
使用 yarn 安装：
``` shell
yarn add mui-player
```

## 2.安装支持库

```shell
yarn add hls.js
yarn add flv.js
```

## 3.使用

分别是 hls.js 和 flv.js 两种方式，具体请看移步MuiPlayer文档

<img style="width:220px;" src="./images/1701956816207.png"></img>
<img style="width:220px;" src="./images/1701956835758.png"></img>

## 4.Demo无效？
Demo无效的话请参上面的提示，执行命令安装。如果这个Demo无法帮到您，请尝试移步Uniapp问答社区或是CSDN解决问题。

```
https://ask.dcloud.net.cn/search/q-bTN1OA==#all

https://so.csdn.net/so/search?spm=1000.2115.3001.4498&q=uniapp%20m3u8&t=&u=
````