開源精選》是我們分享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客戶端流媒體加速能力?；贖5的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，就分享到這里。如果大家有其它優秀播放器插件，歡迎留言交流！