一个开源的HTML5流媒体播放器

开源精选》是我们分享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

开源精选》是我们分享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

ideo.js 是基于 jquery 的HTML5＆Flash 视频播放器, 遵守Apache 2.0开源协议。支持多平台。 Moreover，YouTube，Vimeo 等视频都可播放。对移动设备的支持也很好。

快速试用：

可以使用免费CDN托管版本的 Video.js，简单地将这些文件添加到页面文档的 <head>中即可使用：

然后使用一个HTML5 <video>标签嵌入视频即可。 Video.js 接下来会读取标签然后让它在所有浏览器中都可以工作。

微信订阅号：开源派（opensourcepie）

↓点击阅读原文,查看下载链接

在线咨询

上一篇：HTML入门
下一篇：HTML 链接

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。