公司是一個視頻社交平臺，H5也免不了使用video標簽，經久實踐（也可能是技術不達標）配置vue-video-player播放m3u8文件很多坑點，要配置很多東西，加配個plugin —— videojs-contrib-hls，基于videojs玩兒起來有點費勁，很難受。
基于業務，我們還是需要一個快、狠、準的API來做業務，那么測試aliyun播放器還特么扣以。
填入source，即用即放，簡單開發使用的配方。
如果使用aliyun點播的童鞋還可以使用到更多的配置方向的東西，沒有接入aliyun點播的話也可以直接引入script標簽直接使用，可以說是開箱即用了。
廢話少敘，代碼介入~（代碼是vue的代碼）
| 名稱 | 類型 | 說明 |
|---|---|---|
| id | String | 播放器外層容器的dom元素id。 |
| source | String | 視頻播放地址url：單獨url，默認狀態，表示使用vid+playauth，source播放方式優先級最高，source支持多清晰度設置：source:’{“HD”:”address1”,”SD”:”address2”}’ 。詳情參見 4.7 節。 |
| vid | String | 媒體轉碼服務的媒體Id。 |
| playauth | String | 播放權證，如何得到參見 獲取playauth。 |
| height | String | 播放器高度，可形如‘100%’或者‘100px’chrome瀏覽器下flash播放器分別不能小于397x297。 |
| width | String | 播放器寬度，可形如‘100%’或者‘100px’chrome瀏覽器下flash播放器分別不能小于397x297。 |
| videoWidth | String | 視頻寬度，僅h5支持。詳情參見 4.6 節。 |
| videoHeight | String | 視頻高度，僅h5支持。詳情參見 4.6 節。 |
| preload | Boolean | 播放器自動加載，目前僅h5可用。 |
| cover | String | 播放器默認封面圖片，請填寫正確的圖片url地址 需要preload和autoplay為’false’時，才生效Flash播放器封面也需要開啟 允許跨域訪問。 |
| isLive | Boolean | 播放內容是否為直播，直播時會禁止用戶拖動進度條。 |
| autoplay | Boolean | 播放器是否自動播放，在移動端autoplay屬性會失效。 Safari11不會自動開啟自動播放 如何開啟。 |
| rePlay | Boolean | 播放器自動循環播放。 |
| useH5Prism | Boolean | 指定使用H5播放器。 |
| useFlashPrism | Boolean | 指定使用Flash播放器。 |
| playsinline | Boolean | H5是否內置播放，有的Android瀏覽器不起作用。 |
| showBuffer | Boolean | 顯示播放時緩沖圖標，默認true。 |
| skinRes | Url | 說明：皮膚圖片，不建議隨意修改該字段，如要修改請參照皮膚定制。 |
| skinLayout | Array Boolean | 說明：功能組件布局配置，不傳該字段使用默認布局傳false隱藏所有功能組件，請參照皮膚定制。 |
| controlBarVisibility | String | 控制面板的實現，默認為‘hover’，可選的值為：‘click’、‘hover’、‘always’。 |
| showBarTime | String | 控制欄自動隱藏時間（ms）。 |
| waterMark | url pos size alpha | 添加水印。數據格式：url pos size alpha（目前僅支持flash）。示例：waterMark：“logo.jpg TL 0.15 0.5” url：水印圖片（jpg/png） pos：位置（TL/TR/BL/BR） size：logo寬度占播放器比例（0-1，默認0.2） alpha：透明度（0-1，默認1） |
| extraInfo | String | 說明：JSON串用于定制性接口參數，目前支持：1.“liveRetry”：1 直播流中斷是否重試。2.“fullTitle”：“測試頁面” 全屏時顯示視頻標題（僅flash支持）。3. “m3u8BufferLength”：“30” 播放m3u8時加載緩存ts文件長度單位（秒）（僅flash支持）。4. “liveStartTime”：“2016/08/17 12:00:00” 直播開始時間，用于提示直播未開始(僅flash支持)。5. “liveOverTime”：“2016/08/17 14:00:00” 直播結束時間，用于提示直播結束（僅flash支持）。 |
| enableSystemMenu | Boolean | 是否允許系統右鍵菜單顯示，默認為false。 |
| format | Sting | 指定播放地址格式，只有使用vid的播放方式時支持。可選值為’mp4’、’m3u8’、’flv’、’mp3’，默認為‘mp4’。 |
| mediaType | Sting | 指定返回音頻還是視頻，只有使用vid的播放方式時支持可選值為’video’和’audio’，默認為’video’‘audio’主要是針對只包含音頻的視頻格式，比如音頻的mp4。 |
| qualitySort | Sting | 指定排序方式，只有使用vid+plauth播放方式時支持‘desc’表示按倒序排序（即：從大到小排序）‘asc’表示按正序排序（即：從大到小排序）默認值：‘asc’。 |
| x5_type | String | 聲明啟用同層H5播放器，啟用時設置的值為‘h5’ 詳情參見 同層播放。 |
| x5_fullscreen | Boolean | 聲明視頻播放時是否進入到TBS的全屏模式，默認為false當需要把視頻做為背景時，設置為true詳情參見 同層播放。 |
| x5_video_position | String | 聲明視頻播在界面上的位置，默認為“center”可選值為：“top”，“center”詳情參見 同層播放。 |
| x5_orientation | String | 聲明TBS播放器支持的方向，可選值：landscape：橫屏 portraint：豎屏 詳情參見 同層播放。 |
| autoPlayDelay | Number | 延遲播放時間，單位為秒詳情參見 延遲播放 |
| autoPlayDelayDisplayText | String | 延遲播放提示文本詳情參見 延遲播放 |
| language | String | 國際化，默認為‘zh-cn’如果未設置，則采用瀏覽器語言可選值為‘zh-cn’o、‘en-us’或其它值。 |
| languageTexts | JSON | 自定義國際化文本json結構，key的值需要和language屬性值對應起來例子：{jp:{Play:”Play”}} 自定義值參見 Json結構 |
| snapshot | Boolean | flash啟用截圖功能。 |
| snapshotWatermark | Object | H5設置截圖水印。 |
| useHlsPluginForSafari | Boolean | Safari瀏覽器可以啟用Hls插件播放，Safari 11除外。 |
| enableStashBufferForFlv | Boolean | H5播放flv時，設置是否啟用播放緩存，只在直播下起作用。 |
| stashInitialSizeForFlv | Number | H5播放flv時，初始緩存大小，只在直播下起作用。 |
| loadDataTimeout | Number | 緩沖多長時間后，提示用戶切換低清晰度，默認：20秒。 |
| liveStartTime | String | 直播開始時間，直播時移功能使用，格式為：“2018/01/04 12:00:00”。 |
| liveOverTime | String | 直播結束時間，直播時移功能使用，格式為：“2018/01/04 12:00:00”。 |
| liveTimeShiftUrl | String | 直播可用時移查詢地址，詳情參見 直播時移。 |
可見設置其實也很多，但是相對來說比較豐富簡單。
首先，引入aliyun播放器的script是必要的
/*
首先是css文件，樣式
其次是js文件
當你需要自定義的時候，可以不使用其css文件
*/
<link rel="stylesheet" />
<script charset="utf-8" type="text/javascript" src="http://g.alicdn.com/de/prismplayer/2.7.1/aliplayer-min.js"></script>
其次就是使用了，下面代碼：
<template>
<div class="player" id="video"></div>
</template>
<script>
export default {
data(){
return {
player:{},
}
},
mounted(){
/* 當你沒有其他配置的時候。如下代碼就已經夠用 */
this.player = new Aliplayer({
id: 'video', //container element ID
source : this.$route.query.uri, //源文件 不需要你配置video類型，很爽的一點。
})
/*aliyun播放器事件項*/
this.player.on('ready', e => console.log('----準備成功開始播放----'))
this.player.on('waiting', e => console.log(e)) //視頻請求等待中
this.player.on('play', e => console.log(e))//開始播放
his.player.on('pause', e => console.log(e))//停止
this.player.on('ended', e => console.log(e))//播放結束
this.player.on('timeupdate',e => console.log(e))//進度 ++
this.player.on('error',e => console.log(e))//播放錯誤
this.player.on('m3u8Retry',e => console.log(e))//m3u8請求錯誤
/* and so on ... 還有幾個不是很常用的事件 可以看aliyunapi */
}
}
</script>
參考文檔:
