当前位置：网站首页 > 技术文章 > 正文

一款优秀、开源的 HTML5 视频播放器

zhezhongyun 2025-01-10 18:34 61 浏览

简介

MuiPlayer 是一款 HTML5 视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节等功能。

支持 mp4、m3u8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。

MuiPlayer 具有丰富的参数可以自定义播放器实例，通过轻松的配置即可完成自定义场景的视频播放。

特点

MuiPlayer 帮助我们解决了日常 H5 Video 应用开发中的常见的一些大量问题：

各浏览器平台播放 ui 不能统一
ui 扩展之间以及状态处理容易产生冲突
在不同环境下（android、ios、pc）针对 h5 video api 可能触发事件的时机尽不相同
媒体格式存在各种兼容问题，muiplayer 处理了大多数在不同环境下播放的兼容问题
重复踩踏在开发 h5 video 过程中的一些问题，我们提供了一套完好的解决方案，让编程员少走一些弯路

安装

使用 npm 安装：

npm i mui-player --save

使用 yarn 安装：

yarn add mui-player

使用

1、使用 script 标签引入：

<!-- import basic style files mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- import basic script mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>

<!-- Specify the player container -->
<div id="mui-player"></div>

或者使用模块管理器引入：

import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'

2、定义播放器容器：

<div id="mui-player"></div>

3、初始化构建播放器：

// 初始化 MuiPlayer 插件，MuiPlayer 方法传递一个对象，该对象包括所有插件的配置
var mp = new MuiPlayer({
    container:'#mui-player',
    title:'Title',
    src:'./static/media/media.mp4',
})

以上就能为初始化构建一个具有默认配置控件的视频播放器。

功能预览

开源地址

https://gitee.com/muiplayer/hello-muiplayer

HTML5 Video(视频)

上一篇：html5 视频播放防下载的几种方案盘点
下一篇：Flv.js - FLV视频的HTML5播放器

一款优秀、开源的 HTML5 视频播放器

简介

特点

安装

使用

功能预览

开源地址

相关推荐

HTML标签速查手册?别死记硬背了，带你从原理上掌握它!

旧手机新玩法，MacroDeck进阶指南

用node.js实现一个网页爬虫（nodejs爬虫模拟浏览器）

推荐36种免费React模板和主题「干货」

免费领取→可编辑危废标签模板首发!

业余无线电UV段几种常见天线（uv段最强天线）

今年最常见的前端面试题，你会做几道?

GitHub和码云上，7个h5页面制作工具推荐

BarTender10.1条码软件如何制作模板标签

顶级Javaer，常用的 14 个类库