推薦一款好用的視頻播放器組件

背景

設計師要作一個landing page, 裏面有個視頻播放器， 因此下午就找了找， 浪費很多時間， 最後找到個合適的。

但願之後有遇到相似需求的朋友， 看過這篇文章以後留個印象， 少踩點坑。

正文

要找一個合適的播放器， 我就熟練的打開google， 如圖：

第一位的就是這個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',
  }}

也支持倍速和循環播放:

還能夠設置切換清晰度，視頻封面，自定義進度條提示點等等， 詳細能夠查看參數。

結語

沒什麼好總結的， 剛興趣的朋友能夠試一下， 留個印象。

以上。