超强H5视频播放器

老胡
发布日期:   2022-01-01

大家好，我是开源小妹，今天给大家一款强大的HTML5视频播放插件，MuiPlayer

现在在网页中插入视频的需求越来越多了，如果自己写的话则需要考虑以下问题

  • 各个浏览器播放样式的差别
  • ui 扩展之间以及状态处理容易产生冲突的问题
  • 不同客户端(pc、ios、安卓)针对html5可以触发的时间的时机也不太相同
  • 媒体格式兼容问题

所以小妹在想是不是有一款开源项目把这些问题都考虑并解决了呢，经过小妹的寻找终于找到了，就是上面所说的MuiPlayer

概述

MuiPlayer是一款H5视频播放插件，默认配置了精美可配置的的的播放控件，包括了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。支持 mp4、m3u8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。 MuiPlayer 除了默认的简单配置，还具有丰富的参数可以自定义播放器实例，通过轻松的配置即可完成自定义场景的视频播放。

快速入门

MuiPlayer提供了多种安装方式

  1. 通过npm安装

    1
    npm i mui-player --save

  2. 通过yarn安装

    1
    yarn add mui-player

  3. 直接引入js文件也是可以的，

下面小妹使用直接引入js的方式，体验一下MuiPlayer的功能吧

创建demo项目，目录结构如下：

image-20211231230142035image-

创建Html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>

运行效果如下：

image-20211231230003847

是不是使用起来很简单，很方便呢。当然MuiPlayer还可以进行其他的一些配置例如：

  • 自动播放：autoplay 默认为false，如果设置为true则会自动进行播放
  • 循环播放：loop 默认false，如果设置为true则会循环播放
  • 静音播放：muted 默认为false
  • 初始化播放器宽度：width 默认为auto
  • 初始化播放器高度：height 默认为225px

除了以上的一些属性设置，还有其他的属性设置小妹就不在这里一一列举了，感兴那个趣的同学可以尝试MuiPlayer更丰富的设置。

MuiPlayer除了有属性设置，还提供的事件监听，用来处理适当的动作。

1
2
3
4
5
6
7
8
mp.on('fullscreen-change', function(event){
  var fullScreen = event.fullscreen
  if(fullScreen){
    console.log('全屏了')
  }else{
    console.log('退出全屏了')
  }
});

绑定监听事件之后可以看到如下日志信息

image-20211231232304959

MuiPlayer还提供了一些方法(接口)用户可以自己控制一些播放器的行为动作，例如开启全屏、退出全屏等

还有很多其他丰富的功能，小妹在这里就不一一介绍， 下面小妹在对MuiPlayer总结一下。

小妹总结

经过上面的简单介绍相信大家对MuiPlayer也有了大概的了解，MuiPlayer提供了丰富的配置和事件方便用户自己自定义场景，并且针对PC端和移动端有单独的扩展mui-player-desktop-plugin 和mui-player-mobile-plugin.js，刚兴趣的同学快去动手尝试一下吧。

文章作者: 开源小分队
文章链接: http://ourceteams.github.io/2022/01/01/%E8%B6%85%E5%BC%BAH5%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E5%99%A8/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 开源小分队 !
老胡
  目录