HTML5教程

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

本文主要是介绍推荐一款好用的视频播放器组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

image.png

背景

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

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

正文

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

image.png

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

Griffith

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

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

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

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

image.png

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

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

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

DPlayer 来解救

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

它的优势:

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

image.png

我使用的是React 版本, 引入也十分简单:

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

也支持倍速循环播放:

image.png

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

结语

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

以上。

这篇关于推荐一款好用的视频播放器组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!