聊一聊视频播放器

3,029 阅读3分钟

写在前面

经常在项目中会遇到前端需要播放视频,如果只是播放而已似乎原生的 video 就可以实现,类似这样

<video src="***.mp4" width="100%" controls></video>

配合一些JS是可以实现自动播放等功能的。但是需求总是在变的,如果是一个文档中的教学视频这个时候的需求可能会需要增加 倍速播放 断点播放 等功能。虽说原生的页面配合也是可以实现,但是会涉及到页面的适配、良好的交互以及好看的页面。所以本着没有轮子就找轮子的心态,今天就找找开源的视频播放器。

正文开始

一、DPlayer

DPlayer Github

🍭 Wow, such a lovely HTML5 danmaku video player

目前 Github Star 11.3k Fork 1.9k

1. 效果展示

image.png

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 Github

🎨 ArtPlayer.js 是一个现代全功能的 HTML5 视频播放器

目前 Github Star 537 Fork 71

1. 效果展示

image.png

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-gifGIF 生成插件demo
artplayer-plugin-backlight背光插件demo
artplayer-tool-thumbnail缩略图生成工具demo
artplayer-tool-githubGithub 弹幕库工具demo
artplayer-reactReact 组件demo
artplayer-vueVue 组件demo

三、MuiPlayer

MuiPlayer Gitee

MuiPlayer 是一款 HTML5 视频播放插件,其默认配置了精美可操作的的播放控件,涉及了常用的播放场景,例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。

支持 mp4、m3u8、flv 等多种媒体格式播放,解决大部分兼容问题,同时适应在PC、手机端播放。

MuiPlayer 具有丰富的参数可以自定义播放器实例,通过轻松的配置即可完成自定义场景的视频播放。

1. 效果展示

image.png

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版本的,期待生态越来越完美 👍

总结

目前优秀好用的视频播放器一般会配合云服务或对象存储打包使用,类似阿里、腾讯都有一整套的解决方案,如果使用他们的服务那么整一套解决方案也不错。

目前开源好用的视频播放器不是界面丑就是支持的环境比较少,期待有更多的视频播放组件被开发。

第三个是我写文章的时候才发现的,不得不说国产的软件越来越棒了,轮子越来 越多越来越优秀。

参考资料

DPlayer 文档

Artplayer 文档