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

近我在使用的一款简单容易集成的 web 视频播放组件，支持播放 B站弹幕。

DPlayer 介绍

DPlayer 是一款基于 JavaScript 的 HTML5 弹幕视频播放器，用于在 web 开发中实现视频播放的功能，可以让开发者轻松在 web 应用中嵌入视频。

DPlayer 的技术特点

• 轻量简洁的界面，集成使用非常简单；
• 功能强大，支持主流的视频格式，同时也支持弹幕播放，能够轻松接入B站弹幕；
• 支持直播模式，也支持用户实时弹幕互动；
• 完整支持视频截图、倍速播放、清晰度切换等主流视频播放功能。

开发上手和使用体验

现在以视频作为传播媒体的内容仍然处在一个非常火热的发展阶段，不知道常来我网站逛的各位开发者有没有遇到要在项目中集成视频播放的需求，我之前也用过 Tiny Player 这款小巧的播放器，不过支持的功能比较单一；而强大一点的 xgplayer 不支持弹幕，而这次需求要支持弹幕，无法满足需求。

于是就花时间找了一下，发现了 DPlayer 这款播放器非常合适，于是顺便写一篇文章来推荐给大家。

支持的功能

• 显示弹幕
• 视频截图
• 快捷键
• 清晰度切换
• 进度缩略图
• 加载字幕

支持视频格式

流媒体格式：

• HLS
• FLV
• MPEG DASH
• WebTorrent
• 以及其他任何自定义的格式

视频文件格式：

• MP4 H.264
• WebM
• Ogg Theora Vorbis

安装使用

以 npm 为例，以及在 Vue.js 项目中使用：

npm install dplayer --save

Vue 页面中引入：

<template>
  <div id="video"></div>
</template>
<script>
import DPlayer from 'dplayer';
// ... 省略无关代码，初始化播放器
const dp = new DPlayer({
    container: document.getElementById('video'),
    video: {
        url: 'https:///xxx.xxxx.mp4', // 视频地址
    },
});
</script>

这就完成一个基础播放器了，非常简单。当然 DPlayer 支持的功能也很多，官网提供了中文文档，写得很详细，并且都配套了代码例子，这里就不做过多示例了，在简单理解视频播放原理的前提下，几乎不需要学习就能轻松集成到项目中，亲测在手机端也可以使用。

免费开源说明

DPlayer 是一个免费开源的 HTML5 视频播放器，由来自国内的开发者 DIYgod 开发，项目采用 MIT 开源协议，源码托管在 Github 上，任何人都可以免费下载来使用和修改，也能用于商业项目中。

↓↓点击查看本次分享的网站。

DPlayer - 免费开源、轻量简洁的 HTML5 视频播放器，支持弹幕播放、清晰度切换、倍速播放｜那些免费的砖

eb项目开发中视频播放是一个非常常见的需求，需要播放器能够支持pc端和移动端的使用，并且支持常见的视频格式。我们从github上精选了5款优秀的Html5 播放器插件分享给大家。（排名不分先后）

1. Ckplayer

ckplayer是一款在网页上播放视频的开源软件，主要特点是：开源，功能强大，不依赖其它插件，二次开发方便。

ckplayer基于MIT协议开源。

当家官网最新版本是X2，更新时间：2020.09.20。

软件下载后，使用到的文件如下：

一般项目只用到ckplayer.min.js 、ckplayer.swf、language.json、sytle.json 总大小不超过700k。

ckplayer 支持flv、mp4、m3u8、webm等。

功能上常用的播放控制、弹幕、贴片广告都支持。

2、 Media-element.js

HTML5<audio>或<video>播放器，支持MP4、WebM和MP3，以及HLS、Dash、YouTube、Facebook、SoundCloud和其他具有通用HTML5 MediaElement API的播放器，在所有浏览器中实现一致的UI。

支持视频和音频播放，主要强调在多终端上的界面一致性。

最新版本4.2.17，更新日期：2021-7-6

使用基本功能只需要mediaelement-and-player.min.js、renderers/vimeo.min.js、renderers/twitch.min.js，大小在300k左右，非常小巧。

重点：提供插件机制，通过插件可以实现常见的播放列表、AirPlay、位置标记、视频预览等功能。

3、 VideoJs

开源HTML5和Flash视频播放器。目前多很大厂在使用。官网宣称世界上最流行的开源html5播放器。

支持的视频格式有：mp4，webm，ogv。

最新版本7.14.3, 更新时间：2021-7-27

文件大小约：700k。

4、 Dplayer

非常可爱的html5 弹幕视频播放器。主打弹幕功能，支持MP4、HLS、FLV、WebTorrent播放，提供弹幕接口。

国人开发，有中文文档。国内很多公司在用。

最新版本v1.26.0 更新日期：2020-6-11

基本功能使用文件大小161k. 另外也提供了很多插件供使用。

5、 Xgplayer

西瓜视频播放器（HTML5）、一款带解析器、能节省流量的HTML5视频播放器。字节跳动提供的开源视频播放器。

• PC Web端支持直接播放mp4视频，播放HLS、FLV、MPEG-DASH需要浏览器支持Media Source Extensions
• iOS系统Web场景支持直接播放mp4和HLS，不支持播放FLV、MPEG-DASH
• 安卓系统Web场景支持直接播放mp4和HLS，播放FLV、MPEG-DASH需要浏览器支持Media Source Extensions

中文文档写得很非常全面。支持airplay、弹幕等功能。

支持视频、音频播放。基于插件机制，提供了丰富的插件来扩展播放器的功能。官网提供在线生成器来简化各种参数的配置，如下图：

推荐使用。

今天为大写整理了5个优秀的开源视频播放器的内容，后期会再更新各个播放器的详细使用并进行详细的评测，谢谢大家。