由於業務需要，要找一款可以支持直播和錄播的播放器。傳統播放器，又沒有太好的封裝和集成。所以找到了Aliplayer（傳送門 https://help.aliyun.com/document_detail/62941.html?spm=a2c4g.11186623.6.856.6fd54658nrPGxy#h2--3）
人狠話不多，直接來重點。
文檔上也寫了怎么引入播放器，可還是再說下，至今我還沒發現npm 可以安裝這個播放器。
<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.4/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.7.4/aliplayer-min.js"></script>
如果是SPA（single-page application）頁面，在index.html引入就好。
1.頁面准備
2.初始化
3.播放
點擊中間的播放，就可以直接開始播放了。但是我做了一個小小的封裝，雖然是demo，也是為了完成業務上的要求。
ready這個東東，不要忘記了，為什么我會單獨來講。如果我們想在初始化的時候，設定播放進度。也就是說我們想在視頻的前1分鍾開始播放的時候，
像這樣就可以實現了。
4.觀看時長，也就是我們常說的試看功能， 這里分兩種情況：a，正常播放，b,拖拽（快進）
a.
如果currentTime大於你想要的值就會結束播放。
b.
如果currentTime大於你想要的值就會結束播放。
5.設置控制欄的元素。
我以前是用找到元素直接隱藏的方式，雖然是黑科技，但是效果還是實現了，官方也有寫怎么操作，功能一樣，只是看起來優雅很多。
x和y是調整位置的。
6.前面說到直播，如果是直播，肯定不希望用戶暫停對不，m3u8的延遲特別嚴重。我是用的flv，但是如果點擊播放區域的話，會暫停直播，然后就會報錯。當然用戶還是希望可以有控制欄的元素存在，比如音量，全屏等等。
我的解決方案是用一個遮罩層，讓用戶不能點擊播放區域。這個遮罩層的寬度與播放器一樣大，唯一不同的是，要把控制欄的高度扣除，這樣來設定，用戶又可以控制音量和全屏這些東西，又不能點擊視頻播放區域，就不會影響使用。