您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)video中怎么設(shè)置播放時間點,小編覺得挺實用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
1、video標簽常用屬性 下面shareVideoLink為視頻連接地址
<!--autoplay=>自動播放 controls=>是否顯示控件 loop=>是否循環(huán)播放 muted=>是否靜音播放 poster=>視頻封面 src=>播放源 preload=>頁面加載時進行加載 , 如果有autoplay那么該屬性就會被無視 src="https://media.w3.org/2010/05/sintel/trailer.mp4"-->
<video id="videoPlayer" width="100%" height="100%" loop controls :src="shareVideoLink"></video>
2、獲取視頻播放時長,初始化在mounted執(zhí)行此方法,當視屏開始播放的時候,可以獲取到視頻播放的實時時間點
/** * 獲取視頻播放時長*/getVideoTime () { if (document.getElementById ('videoPlayer')) { let videoPlayer = document.getElementById ('videoPlayer'); videoPlayer.addEventListener('timeupdate', function () { console.log(`當前的時間點是${videoPlayer.currentTime},視頻長度是${videoPlayer.duration}`); }, false) }}
3、設(shè)置視頻從某個具體時間點開始播放,下面方法中參數(shù)num表示要從什么時間點開始播放視頻,比如:點擊一個按鈕去執(zhí)行下面方法:
比如后臺返回了2460198為毫秒 只需要轉(zhuǎn)換為秒就好了,video會從秒自動計算,賦值給video標簽秒就好,2460198就是246.0198秒(s) 這時候我們調(diào)用下面方法就可以這么寫:
this.playBySeconds(2460198/1000) 或者this.playBySeconds(2460.198) ,因為2460.198秒是41.0033001分,所以視頻會自動從41.0033001分開始播放,就OK了
//設(shè)置播放點,續(xù)播playBySeconds (num) { if (num && document.getElementById ('videoPlayer')) { let myVideo = document.getElementById ('videoPlayer'); myVideo.play (); myVideo.currentTime = num; }},
video其他屬性總結(jié):
<button type="button" onclick="play()">播放</button>
<button type="button" onclick="pause()">暫停</button>
<button type="button" onclick="load()">切換視頻</button>
<button type="button" onclick="open_voice()">打開聲音</button>
<button type="button" onclick="close_voice()">關(guān)閉聲音</button>
<script type="text/javascript" charset="utf-8">
var video = document.getElementById("video");
function play(){
video.play();
}
function pause(){
video.pause();
}
function load(){
video.src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4";
video.load();
}
function open_voice(){
video.muted = false;
}
function close_voice(){
video.muted = true;
}
video.addEventListener("play", function(){
console.log("視頻播放")
});
video.addEventListener("pause", function(){
console.log("視頻暫停")
});
video.addEventListener("ended", function(){
console.log("播放結(jié)束")
});
video.addEventListener("volumechange", function(e){
if(video.muted){
console.log("你關(guān)閉了聲音")
else{
console.log("你打開了聲音")
}
});
</script>
以上就是video中怎么設(shè)置播放時間點,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。