写在前面
经常在项目中会遇到前端需要播放视频,如果只是播放而已似乎原生的 video 就可以实现,类似这样
<video src="***.mp4" width="100%" controls></video>
配合一些JS是可以实现自动播放等功能的。但是需求总是在变的,如果是一个文档中的教学视频这个时候的需求可能会需要增加 倍速播放 断点播放 等功能。虽说原生的页面配合也是可以实现,但是会涉及到页面的适配、良好的交互以及好看的页面。所以本着没有轮子就找轮子的心态,今天就找找开源的视频播放器。
正文开始
一、DPlayer
🍭 Wow, such a lovely HTML5 danmaku video player
目前 Github Star 11.3k Fork 1.9k
1. 效果展示
2. 示例代码
<script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.25.1/DPlayer.min.js"></script>
<body>
<div id="dplayer"></div>
</body>
<script type="text/javascript" language="javascript">
const dp = new DPlayer({
container: document.getElementById('dplayer'),
airplay: true,
preload: 'auto',
lang: "zh-cn",
volume: 0.7,
playbackSpeed: [0.5, 1, 1.5, 2,4],
video: {
url: 'https://www.w3school.com.cn/example/html5/mov_bbb.mp4',
}
});
</script>
3. 总结
整体来看我是首推这个播放器的优点如下
- 国人开发 优秀的中文文档
- 良好的适配,支持 Safari、H5等
- 功能齐全,支持倍速播放、画质调节、截图、弹幕等功能
- 清晰的文档以及种类繁多的API
- 拥有 react 的包 react-dplayer
缺点:
- 好久不更新 (似乎是比较成熟的产品)
二、Artplayer
🎨 ArtPlayer.js 是一个现代全功能的 HTML5 视频播放器
目前 Github Star 537 Fork 71
1. 效果展示
2. 示例代码
<!DOCTYPE html>
<html>
<head>
<title>ArtPlayer</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="artplayer-app" style="width:400px;height:300px"></div>
<script src="path/to/artplayer.js"></script>
<script>
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
});
</script>
</body>
</html>
3. 总结
整体上与 DPlayer 差不多,目前作者比较活跃,同时也拥有众多第三方生态,下表来自 DPlayer
项目 | 描述 | 演示 | |
---|---|---|---|
artplayer-plugin-danmuku | 弹幕库插件 | demo | |
artplayer-plugin-gif | GIF 生成插件 | demo | |
artplayer-plugin-backlight | 背光插件 | demo | |
artplayer-tool-thumbnail | 缩略图生成工具 | demo | |
artplayer-tool-github | Github 弹幕库工具 | demo | |
artplayer-react | React 组件 | demo | |
artplayer-vue | Vue 组件 | demo |
三、MuiPlayer
MuiPlayer 是一款 HTML5 视频播放插件,其默认配置了精美可操作的的播放控件,涉及了常用的播放场景,例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。
支持 mp4、m3u8、flv 等多种媒体格式播放,解决大部分兼容问题,同时适应在PC、手机端播放。
MuiPlayer 具有丰富的参数可以自定义播放器实例,通过轻松的配置即可完成自定义场景的视频播放。
1. 效果展示
2. 示例代码
注意: 文中的路径需要根据自己的文件具体配置(代码来自gitee demo 详情查看仓库)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>mui-player PC端扩展插件示例</title>
<link rel="stylesheet" href="/release/mui-player/dist/mui-player.min.css">
<script src="./static/js/config.js"></script>
<script src="/release/mui-player/dist/mui-player.min.js"></script>
<script src="/release/mui-player-desktop-plugin/dist/mui-player-desktop-plugin.min.js"></script>
</head>
<body>
<h3 style="text-align: center;">PC端扩展插件示例</h3>
<div id="mui-player" style="max-width: 700px;margin: auto"></div>
</body>
<script>
var config = window.playerConfig;
config.plugins = [
typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({
thumbnails:{ // 缩略图配置
preview:['https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/output_160x90_10x10_001.jpg'],
tile:[10,10],
scale:[160,90],
},
}) : {},
]
console.log(config);
var mp = new MuiPlayer(config);
</script>
</html>
3. 总结
特点:
- 各浏览器平台播放 ui 不能统一
- ui 扩展之间以及状态处理容易产生冲突
- 在不同环境下(android、ios、pc)针对 h5 video api 可能触发事件的时机尽不相同
- 媒体格式存在各种兼容问题,muiplayer 处理了大多数在不同环境下播放的兼容问题
- 重复踩踏在开发 h5 video 过程中的一些坑,我们提供了一套完好的解决方案,让开发者少走一些弯路
比较新的视频播放器 目前只看到js版本的,期待生态越来越完美 👍
总结
目前优秀好用的视频播放器一般会配合云服务或对象存储打包使用,类似阿里、腾讯都有一整套的解决方案,如果使用他们的服务那么整一套解决方案也不错。
目前开源好用的视频播放器不是界面丑就是支持的环境比较少,期待有更多的视频播放组件被开发。
第三个是我写文章的时候才发现的,不得不说国产的软件越来越棒了,轮子越来 越多越来越优秀。