公司是一個(gè)視頻社交平臺(tái)重罪，H5也免不了使用video標(biāo)簽，經(jīng)久實(shí)踐（也可能是技術(shù)不達(dá)標(biāo)）配置vue-video-player播放m3u8文件很多坑點(diǎn)尺迂，要配置很多東西具温，加配個(gè)plugin —— videojs-contrib-hls，基于videojs玩兒起來有點(diǎn)費(fèi)勁癞揉，很難受纸肉。
基于業(yè)務(wù)，我們還是需要一個(gè)快喊熟、狠柏肪、準(zhǔn)的API來做業(yè)務(wù)，那么測試aliyun播放器還特么扣以芥牌。
填入source烦味，即用即放，簡單開發(fā)使用的配方壁拉。
如果使用aliyun點(diǎn)播的童鞋還可以使用到更多的配置方向的東西拐叉，沒有接入aliyun點(diǎn)播的話也可以直接引入script標(biāo)簽直接使用，可以說是開箱即用了扇商。
廢話少敘凤瘦，代碼介入~（代碼是vue的代碼）
| 名稱 | 類型 | 說明 |
|---|---|---|
| id | String | 播放器外層容器的dom元素id。 |
| source | String | 視頻播放地址url：單獨(dú)url案铺，默認(rèn)狀態(tài)蔬芥，表示使用vid+playauth，source播放方式優(yōu)先級(jí)最高，source支持多清晰度設(shè)置：source:’{“HD”:”address1”,”SD”:”address2”}’ 笔诵。詳情參見 4.7 節(jié)返吻。 |
| vid | String | 媒體轉(zhuǎn)碼服務(wù)的媒體Id。 |
| playauth | String | 播放權(quán)證乎婿，如何得到參見 獲取playauth测僵。 |
| height | String | 播放器高度，可形如‘100%’或者‘100px’chrome瀏覽器下flash播放器分別不能小于397x297谢翎。 |
| width | String | 播放器寬度捍靠，可形如‘100%’或者‘100px’chrome瀏覽器下flash播放器分別不能小于397x297。 |
| videoWidth | String | 視頻寬度森逮，僅h5支持榨婆。詳情參見 4.6 節(jié)。 |
| videoHeight | String | 視頻高度褒侧，僅h5支持良风。詳情參見 4.6 節(jié)。 |
| preload | Boolean | 播放器自動(dòng)加載闷供，目前僅h5可用烟央。 |
| cover | String | 播放器默認(rèn)封面圖片，請(qǐng)?zhí)顚懻_的圖片url地址 需要preload和autoplay為’false’時(shí)歪脏，才生效Flash播放器封面也需要開啟 允許跨域訪問疑俭。 |
| isLive | Boolean | 播放內(nèi)容是否為直播，直播時(shí)會(huì)禁止用戶拖動(dòng)進(jìn)度條唾糯。 |
| autoplay | Boolean | 播放器是否自動(dòng)播放怠硼，在移動(dòng)端autoplay屬性會(huì)失效鬼贱。 Safari11不會(huì)自動(dòng)開啟自動(dòng)播放 如何開啟移怯。 |
| rePlay | Boolean | 播放器自動(dòng)循環(huán)播放。 |
| useH5Prism | Boolean | 指定使用H5播放器这难。 |
| useFlashPrism | Boolean | 指定使用Flash播放器舟误。 |
| playsinline | Boolean | H5是否內(nèi)置播放，有的Android瀏覽器不起作用姻乓。 |
| showBuffer | Boolean | 顯示播放時(shí)緩沖圖標(biāo)嵌溢，默認(rèn)true。 |
| skinRes | Url | 說明：皮膚圖片蹋岩，不建議隨意修改該字段赖草，如要修改請(qǐng)參照皮膚定制。 |
| skinLayout | Array Boolean | 說明：功能組件布局配置剪个，不傳該字段使用默認(rèn)布局傳false隱藏所有功能組件秧骑，請(qǐng)參照皮膚定制。 |
| controlBarVisibility | String | 控制面板的實(shí)現(xiàn)，默認(rèn)為‘hover’乎折，可選的值為：‘click’绒疗、‘hover’、‘a(chǎn)lways’骂澄。 |
| showBarTime | String | 控制欄自動(dòng)隱藏時(shí)間（ms）吓蘑。 |
| waterMark | url pos size alpha | 添加水印。數(shù)據(jù)格式：url pos size alpha（目前僅支持flash）坟冲。示例：waterMark：“l(fā)ogo.jpg TL 0.15 0.5” url：水印圖片（jpg/png） pos：位置（TL/TR/BL/BR） size：logo寬度占播放器比例（0-1磨镶，默認(rèn)0.2） alpha：透明度（0-1，默認(rèn)1） |
| extraInfo | String | 說明：JSON串用于定制性接口參數(shù)樱衷，目前支持：1.“l(fā)iveRetry”：1 直播流中斷是否重試棋嘲。2.“fullTitle”：“測試頁面” 全屏?xí)r顯示視頻標(biāo)題（僅flash支持）。3. “m3u8BufferLength”：“30” 播放m3u8時(shí)加載緩存ts文件長度單位（秒）（僅flash支持）矩桂。4. “l(fā)iveStartTime”：“2016/08/17 12:00:00” 直播開始時(shí)間沸移，用于提示直播未開始(僅flash支持)。5. “l(fā)iveOverTime”：“2016/08/17 14:00:00” 直播結(jié)束時(shí)間侄榴，用于提示直播結(jié)束（僅flash支持）雹锣。 |
| enableSystemMenu | Boolean | 是否允許系統(tǒng)右鍵菜單顯示，默認(rèn)為false癞蚕。 |
| format | Sting | 指定播放地址格式蕊爵，只有使用vid的播放方式時(shí)支持¤肷剑可選值為’mp4’攒射、’m3u8’、’flv’恒水、’mp3’会放，默認(rèn)為‘mp4’。 |
| mediaType | Sting | 指定返回音頻還是視頻钉凌，只有使用vid的播放方式時(shí)支持可選值為’video’和’audio’咧最，默認(rèn)為’video’‘a(chǎn)udio’主要是針對(duì)只包含音頻的視頻格式，比如音頻的mp4御雕。 |
| qualitySort | Sting | 指定排序方式矢沿，只有使用vid+plauth播放方式時(shí)支持‘desc’表示按倒序排序（即：從大到小排序）‘a(chǎn)sc’表示按正序排序（即：從大到小排序）默認(rèn)值：‘a(chǎn)sc’。 |
| x5_type | String | 聲明啟用同層H5播放器酸纲，啟用時(shí)設(shè)置的值為‘h5’ 詳情參見 同層播放捣鲸。 |
| x5_fullscreen | Boolean | 聲明視頻播放時(shí)是否進(jìn)入到TBS的全屏模式，默認(rèn)為false當(dāng)需要把視頻做為背景時(shí)闽坡，設(shè)置為true詳情參見 同層播放栽惶。 |
| x5_video_position | String | 聲明視頻播在界面上的位置脓诡，默認(rèn)為“center”可選值為：“top”，“center”詳情參見 同層播放媒役。 |
| x5_orientation | String | 聲明TBS播放器支持的方向祝谚，可選值：landscape：橫屏 portraint：豎屏 詳情參見 同層播放。 |
| autoPlayDelay | Number | 延遲播放時(shí)間酣衷，單位為秒詳情參見 延遲播放 |
| autoPlayDelayDisplayText | String | 延遲播放提示文本詳情參見 延遲播放 |
| language | String | 國際化交惯，默認(rèn)為‘zh-cn’如果未設(shè)置，則采用瀏覽器語言可選值為‘zh-cn’o穿仪、‘en-us’或其它值席爽。 |
| languageTexts | JSON | 自定義國際化文本json結(jié)構(gòu)，key的值需要和language屬性值對(duì)應(yīng)起來例子：{jp:{Play:”Play”}} 自定義值參見 Json結(jié)構(gòu) |
| snapshot | Boolean | flash啟用截圖功能啊片。 |
| snapshotWatermark | Object | H5設(shè)置截圖水印只锻。 |
| useHlsPluginForSafari | Boolean | Safari瀏覽器可以啟用Hls插件播放，Safari 11除外紫谷。 |
| enableStashBufferForFlv | Boolean | H5播放flv時(shí)齐饮，設(shè)置是否啟用播放緩存，只在直播下起作用笤昨。 |
| stashInitialSizeForFlv | Number | H5播放flv時(shí)祖驱，初始緩存大小，只在直播下起作用瞒窒。 |
| loadDataTimeout | Number | 緩沖多長時(shí)間后捺僻，提示用戶切換低清晰度，默認(rèn)：20秒崇裁。 |
| liveStartTime | String | 直播開始時(shí)間匕坯，直播時(shí)移功能使用，格式為：“2018/01/04 12:00:00”拔稳。 |
| liveOverTime | String | 直播結(jié)束時(shí)間葛峻，直播時(shí)移功能使用，格式為：“2018/01/04 12:00:00”壳炎。 |
| liveTimeShiftUrl | String | 直播可用時(shí)移查詢地址泞歉，詳情參見 直播時(shí)移逼侦。 |
可見設(shè)置其實(shí)也很多匿辩，但是相對(duì)來說比較豐富簡單。
首先榛丢，引入aliyun播放器的script是必要的
/*
首先是css文件铲球，樣式
其次是js文件
當(dāng)你需要自定義的時(shí)候，可以不使用其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(){
/* 當(dāng)你沒有其他配置的時(shí)候稼病。如下代碼就已經(jīng)夠用 */
this.player = new Aliplayer({
id: 'video', //container element ID
source : this.$route.query.uri, //源文件 不需要你配置video類型选侨，很爽的一點(diǎn)。
})
/*aliyun播放器事件項(xiàng)*/
this.player.on('ready', e => console.log('----準(zhǔn)備成功開始播放----'))
this.player.on('waiting', e => console.log(e)) //視頻請(qǐng)求等待中
this.player.on('play', e => console.log(e))//開始播放
his.player.on('pause', e => console.log(e))//停止
this.player.on('ended', e => console.log(e))//播放結(jié)束
this.player.on('timeupdate',e => console.log(e))//進(jìn)度 ++
this.player.on('error',e => console.log(e))//播放錯(cuò)誤
this.player.on('m3u8Retry',e => console.log(e))//m3u8請(qǐng)求錯(cuò)誤
/* and so on ... 還有幾個(gè)不是很常用的事件 可以看aliyunapi */
}
}
</script>
參考文檔:
