设计师要做一个landing page, 里面有个视频播放器, 所以下午就找了找, 浪费不少时间, 最后找到个合适的。
希望以后有遇到类似需求的朋友, 看过这篇文章之后留个印象, 少踩点坑
。
要找一个合适的播放器, 我就熟练的打开google, 如图:
第一位的就是这个Griffith
, 我一看这个图, 是我想要的样子, 可以用:
然后欢天喜地的开始了安装, 调试。
刚开始一切都是美好的样子, 装完之后, 开始暴露一些列问题:
以及一大堆未修复的问题:
附带一个好不容易找到的在线demo:
https://codesandbox.io/embed/...
刚开始尝试通过改变参数的方式修复全屏的问题, 最后失败了。
后面经过一系列尝试, 找到一个满意的播放器: DPlayer
.
它的优势:
我使用的是React 版本, 引入也十分简单:
import DPlayer from 'react-dplayer'; <DPlayer options={{ video: { url: 'https://media.w3.org/2010/05/sintel/trailer.mp4', }, lang: 'en', }}
也支持倍速
和循环播放
:
还可以设置切换清晰度,视频封面,自定义进度条提示点等等, 详细可以查看参数。
没什么好总结的, 刚兴趣的朋友可以试一下, 留个印象。
以上。