本節(jié)學(xué)習(xí)目標(biāo)
<video>組件的使用
他可以實現(xiàn)那些功能？
- 播放網(wǎng)絡(luò)視頻
- 設(shè)置播放或者暫停
- 自動播放
- 監(jiān)測各種事件
- 支持多個
<video>同時播放多個視頻 - controls在網(wǎng)頁上顯示工具條
- 唯一合法的子標(biāo)簽
<text>
話不多少直接進(jìn)入主題
先寫好基本內(nèi)容
<template>
<div>
<video class="video" ></video>
</div>
</template>
<style scoped>
.video {
width: 630px;
height: 350px;
margin-top: 60px;
margin-left: 60px;
}
</style>
<script>
export default {
}
</script>
1.播放網(wǎng)絡(luò)視頻
下面是一個網(wǎng)絡(luò)視頻地址
http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4
播放視頻很簡單值需要設(shè)置標(biāo)簽的src字段即可如下
<video class="video" src="http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4"></vedio>
注意我上面的寫法是把地址直接寫死的,一般開發(fā)這個src值都是從網(wǎng)絡(luò)獲取的,所以我們要給它綁定變量如下
<video class="video" :src="src"></vedio>
解釋
格式很簡單,只需要在src前面添加: 即可,當(dāng)然我們也可以不用這樣的簡寫,完整的寫法為
v-bind:src
2.設(shè)置視頻的播放狀態(tài)
設(shè)置標(biāo)簽的字典
play-status可以設(shè)的值為play或者pause
這個值決定播放器的播放狀態(tài),有了這個屬性,我們就可以通過變量來控制播放器的播放了
<video class="video" :src="src" play-status='pause'></video>
3.設(shè)置自動播放
當(dāng)我們打開頁面的時候,是否讓視頻自動播放,我們可以通過兩種方式解決
第一種.就是設(shè)置播放狀態(tài)為play
<video class="video" :src="src" play-status='play'></video>
第二種 使用‘a(chǎn)uto-play’字段
<video class="video" :src="src" auto-play='true'></video>
問題:如果我們同時設(shè)置了auto-play='true'和play-status='pause',播放器是播放還是暫停呢?
如果初次進(jìn)入頁面同時這個兩這個值,會以'auto-play'為準(zhǔn),也就是自動播放
4.監(jiān)測各種事件
事件主要有以下幾種
start：當(dāng) playback 的狀態(tài)是 Playing 時觸發(fā)
pause：當(dāng) playback 的狀態(tài)是 Paused 時觸發(fā)
finish：當(dāng) playback 的狀態(tài)是 Finished 時觸發(fā)
-
fail：當(dāng) playback 狀態(tài)是 Failed 時觸發(fā)
<video class="video" :src="src" auto-play="false" @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail" play-status='pause'></video>
5.支持多個<video>同時播放多個視頻
可能這個需求不是很常見,但是這個標(biāo)簽可以實現(xiàn)同時播放多個視頻的需求
<template>
<div>
<video class="video" :src="src" ></video>
<video class="video" :src="src"></video>
<video class="video" :src="src" ></video>
</div>
</template>
controls網(wǎng)頁上顯示工具條
我們發(fā)現(xiàn)上面的截圖沒有工具條,這個是網(wǎng)頁上的截圖,手機上是有工具條的,原因很簡單,如果你的標(biāo)簽就算沒有添加controls字段,手機上的播放器也會顯示工具條,因為原生的播放器不支持隱藏工具條功能,但是網(wǎng)頁是支持這個屬性的!那么怎么讓網(wǎng)頁顯示這個工具條呢？
<video class="video" :src="src" controls></video>
<video class="video" :src="src" controls="controls"></video>
<video class="video" :src="src" controls></video>
注意
我使用了兩種寫法
controls或者controls='controls',都可以的
唯一合法的子標(biāo)簽 <text>
不過這個就是個坑,因為你設(shè)置了子標(biāo)簽,它會默認(rèn)在視頻的下面,如果你真的想要,給視頻上放文字,如下面
你可以使用絕對定位方式將標(biāo)簽添加到視頻組件的上層
<template>
<div>
<video class="video" :src="src" controls></video>
<text class="text">彈幕</text>
</div>
</template>
布局代碼如下
<style scoped>
.video {
width: 630px;
height: 350px;
margin-top: 60px;
margin-left: 60px;
}
.text{
position: absolute; // 設(shè)置布局方式
top:60px; // 距離父視圖上邊距為60px
left: 60px; // 距離父視圖左邊距為60px
background-color: red;
}
</style>
關(guān)于視頻組件暫時講解到這里
