推荐一款好用的视频播放器组件

背景

设计师要做一个landing page, 里面有个视频播放器， 所以下午就找了找， 浪费不少时间， 最后找到个合适的。

希望以后有遇到类似需求的朋友， 看过这篇文章之后留个印象， 少踩点坑。

正文

要找一个合适的播放器， 我就熟练的打开google， 如图：

第一位的就是这个Griffith, 我一看这个图， 是我想要的样子， 可以用：

Griffith 的弊端

然后欢天喜地的开始了安装， 调试。

刚开始一切都是美好的样子， 装完之后， 开始暴露一些列问题：

• 类型类型与文档不一致
• fullScreen 点击无效.
• error 信息必传， 传了就直接显示播放失败。。
• ...

以及一大堆未修复的问题：

附带一个好不容易找到的在线demo:

https://codesandbox.io/embed/...

刚开始尝试通过改变参数的方式修复全屏的问题， 最后失败了。

DPlayer 来解救

后面经过一系列尝试， 找到一个满意的播放器： DPlayer.

它的优势：

• 完备的文档
• 丰富的api
• 活跃的生态
• 多种格式的支持
• 齐备的插件
• 支持弹幕
• 丰富的快捷键
• 支持弹幕直播

我使用的是React 版本， 引入也十分简单：

import DPlayer from 'react-dplayer';
<DPlayer
  options={{
    video: {
      url: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
    },
    lang: 'en',
  }}

也支持倍速和循环播放:

还可以设置切换清晰度，视频封面，自定义进度条提示点等等， 详细可以查看参数。

类型错误

需要注意的是， 官方并没有提供类型， 所以如果你用了ts, 可能会有警告：

没有类型：

解决办法

在declares.d.ts 文件中，手动声明一下即可。

问题解决。

结语

没什么好总结的， 刚兴趣的朋友可以试一下， 留个印象。

以上。

谢谢。

---

如果你觉得这篇内容对你挺有启发，可以：

1. 点个「在看」，让更多的人也能看到这篇内容。
2. 关注公众号「前端e进阶」，掌握前端面试重难点，公众号后台回复「加群」和小伙伴们畅聊技术。