超强H5视频播放器!!!
大家好,我是开源小妹!今天给大家介绍一款强大的HTML5视频播放插件。现在在网页中插入视频的需求越来越多了,自己写的话则需要考虑以下问题:
- 各个浏览器播放样式的差别
- ui 扩展之间以及状态处理容易产生冲突的问题
- 不同客户端(pc、ios、安卓)针对html5可以触发的时机也不太相同
- 媒体格式兼容问题
所以小妹在想是不是有一款开源项目把这些问题都考虑并解决了呢。经过小妹的寻找终于找到了,就是MuiPlayer。
概述
MuiPlayer是一款H5视频播放插件,默认配置了精美可配置的播放控件,包括了常用的播放场景,例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。支持 mp4、m3u8、flv 等多种媒体格式播放,解决大部分兼容问题,同时适应在PC、手机端播放。MuiPlayer 除了默认的简单配置,还具有丰富的参数可以自定义播放器实例,通过轻松的配置即可完成自定义场景的视频播放。
快速入门
MuiPlayer提供了多种安装方式
通过npm安装
npm i mui-player --save
通过yarn安装
yarn add mui-player
直接引入js文件也是可以的
下面小妹使用直接引入js的方式,体验一下MuiPlayer的功能吧! 创建demo项目,目录结构如下:
创建Html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple</title>
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>
<script type="text/javascript" src="js/mui-player.min.js"></script>
</head>
<body>
<div id="mui-player"></div>
</body>
<script type="application/javascript">
var mp = new MuiPlayer({
container:'#mui-player',
title:'Simple',
src:'./video/Elk安装准备01.mov',
})
</script>
</html>
运行效果如下:
是不是使用起来很简单,很方便呢。当然MuiPlayer还可以进行其他的一些配置,例如:
- 自动播放:autoplay 默认为false,如果设置为true则会自动进行播放
- 循环播放:loop 默认false,如果设置为true则会循环播放
- 静音播放:muted 默认为false
- 初始化播放器宽度:width 默认为auto
- 初始化播放器高度:height 默认为225px
除了以上的一些属性设置,还有其他的属性设置小妹就不在这里一一列举了,感兴趣的同学可以尝试MuiPlayer更丰富的设置。
MuiPlayer除了有属性设置,还提供的事件监听,用来处理适当的动作。
mp.on('fullscreen-change', function(event){
var fullScreen = event.fullscreen
if(fullScreen){
console.log('全屏了')
}else{
console.log('退出全屏了')
}
});
绑定监听事件之后可以看到如下日志信息。
MuiPlayer还提供了一些方法(接口),用户可以自己控制一些播放器的行为动作,例如开启全屏、退出全屏等。
还有很多其他丰富的功能,小妹在这里就不一一介绍了,下面小妹对MuiPlayer做一下总结。
小妹总结
经过上面的简单介绍相信大家对MuiPlayer也有了大概的了解,MuiPlayer提供了丰富的配置和事件方便用户自己自定义场景,并且针对PC端和移动端有单独的扩展mui-player-desktop-plugin 和mui-player-mobile-plugin.js。
相关文章
- 移动端H5坑位指南
- WKWebView 加载 Uni-App 导出的本地 H5
- 羊了个羊APP/H5网页/小程序游戏系统开发搭建教程及部署源码
- h5骨架屏快速生成方案
- .h5文件的读取_python读写h5文件
- python打开h5文件可视化_python环境变量的配置
- H5痣相占卜页面+特效演示(酷炫特效)
- h5小游戏开发_小程序小游戏系统开发定制对接方案
- 移动端H5通过flexible.js+rem自适应适配方案
- 2023最新H5前端阅读书单推荐
- H5/APP客服端源码/uniapp在线客服系统源码开源了,全源码代码解读及发行安装教程
- 开源独立高性能客服系统,支持微信网页,H5端,PC端客服接入
- SkeyeVSS综合安防视频云服务WEB H5无插件播放RTSP摄像机解决方案,拒绝插件,拥抱H5,Windows PC、 Liunx、 Android
- H5底部添加导航栏遮挡主体内容(移动端底部导航栏实现)