开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件——MuiPlayer。

MuiPlayer 是一个开源的HTML5视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节等功能。支持 mp4、m3u8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。

特点

• 各浏览器平台播放 ui 不能统一
• ui 扩展之间以及状态处理容易产生冲突
• 在不同环境下（android、ios、pc）针对 h5 video api 可能触发事件的时机尽不相同
• 媒体格式存在各种兼容问题，muiplayer 处理了大多数在不同环境下播放的兼容问题
• 具有丰富的参数可以自定义播放器实例，通过轻松的配置即可完成自定义场景的视频播放

快速开始

• 安装

使用 npm 安装：

npm i mui-player --save

使用 yarn 安装：

yarn add mui-player

• 使用

1 使用 script 标签引入：

<!-- 引入基础样式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- 引入基础脚本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>

<!-- 指定播放器容器 -->
<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:'标题',
    src:'./static/media/media.mp4',
})

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

更多API基础配置： https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE

效果演示

• 基础效果

• 直播模式

• 播放字幕

• 播放弹幕

• 多窗口播放

更多内容大家可自行前往阅读。

开源地址：https://gitee.com/muiplayer/hello-muiplayer

开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的HTML5流媒体播放器——PearPlayer.js。

PearPlayer是完全用JavaScript写的开源HTML5流媒体播放框架，实现了融合HTTP（含HTTPS、HTTP2）和WebRTC的多协议、多源、低延迟、高带宽利用率的无插件Web客户端流媒体加速能力。基于H5的MSE（Media Source Extension）技术将来自多个源节点的Buffer分块喂给播放器，再加上精心设计的算法可实现最优的调度策略及对各种异常情况的处理，PearPlayer由此能在保证用户流畅视频体验的前提下最大化P2P率。

PearPlayer特性

• P2P能力基于WebRTC，无须安装任何插件
• 多协议(HTTP、HTTPS、WebRTC)、多源
• 自研的调度算法，在保证用户流畅视频体验的前提下最大化P2P率
• 默认无需填参数（内部根据视频码率等作自适应），高级使用模式下可自行调整算法和参数
• 默认不会无限制缓冲，尽可能为CP用户节省带宽/流量
• 支持Chrome、Firefox、Opera、IE、Edge等主流浏览器，即将支持Safari、腾讯微信、X5/TBS（可多源传输，播放问题待不久后由MSE支持完善）
• 可选接入低成本、高可用的Pear Fog CDN
• 协议默认通过TLS/DTLS全加密，无DPI特征；并可通过Pear Fog组件的动态端口映射进一步消除统计学特征
• 像使用HTML5 <video>标签一样简单，并易与video.js等流行播放框架集成
• 具备Browser P2P能力（基于WebTorrent）

使用方法

首先通过script标签导入pear-player.min.js：

<script src="./dist/pear-player.min.js"></script>

或者使用CDN：

<script src="https://cdn.jsdelivr.net/npm/pearplayer@latest"></script>

假设用video标签播放以下视频，HTML如下：

<video id="pearvideo" src="https://qq.webrtc.win/tv/Pear-Demo-Yosemite_National_Park.mp4" controls>

只需以下几行代码，即可将PearPlayer绑定到video标签：

<script>

/**

* 第一个参数为video标签的id或class

* opts是可选的参数配置

*/

if (PearPlayer.isMSESupported()) {

var player = new PearPlayer('#pearvideo', opts);

}

</script>

至此，就已经添加播放器了，无需任何插件。

开源地址：https://gitee.com/PearInc/PearPlayer.js

前有给大家分享2个超棒的视频播放器。今天继续分享一款高质量的H5视频播放器插件LivePlayer。

HTML5 开源视频播放器DPlayer

Vue 视频播放组件Vue-CoreVideoPlayer

liveplayer 一款集m3u8、rtmp、hls、flv于一身的H5视频流媒体播放器。使用简单，功能强大，免费使用。

功能特点

• 支持MP4播放;
• 支持m3u8/HLS播放;
• 支持HTTP-FLV/WS-FLV播放;
• 支持RTMP播放;
• 支持直播和点播播放;
• 支持播放器快照截图;
• 支持点播多清晰度播放;
• 支持全屏或比例显示;
• 自带的flash支持极速和流畅模式;
• 自带的flash支持HTTP-FLV播放;
• 自动检测IE浏览器兼容播放;
• 支持自定义叠加层;

安装

$ npm i @liveqing/liveplayer -S

使用插件

<template>
  <div class="live-player">
    <div style="width:640px;height:360px;">
      <LivePlayer videoUrl="assets/video.mp4" />
      
      <LivePlayer 
        ref="livePlayer"  
        :videoUrl="videoUrl"
        @snapOutside="snapOutside" 
        fluent
        autoplay
        live
        stretch
      />
    </div>
    <ul>
      <li><a @click="pause">暂停</a></li>
      <li><a @click="play">播放</a></li>
      <li><a @click="snap">截图数据</a></li>
    </ul>
  </div>
<template>
<script>
import LivePlayer from '@liveqing/liveplayer'
export default {
  components: {
    LivePlayer
  },
  data() {
    return {
      videoUrl: 'rtmp://live.hkstv.hk.lxdns.com/live/hks2'
    }
  },
  methods: {
    // 播放
    play: function () {
      this.$refs.livePlayer.play();
    },
    // 暂停
    pause: function () {
      this.$refs.livePlayer.pause();
    },
    // 外部API获取快照
    snap: function () {
      this.$refs.livePlayer.snap();
    },
    // 外部快照回调
    snapOutside: function (snapData) {
      console.log(snapData)
    }
  }
}
</script>

属性参数

方法

事件

最后附上文档及示例地址

# 文档地址
https://www.liveqing.com/docs/manuals/LivePlayer.html

# vue-cli集成示例
https://github.com/livegbs/liveplayer-vc

ok，就分享到这里。如果大家有其它优秀播放器插件，欢迎留言交流！