前端實(shí)現(xiàn)視頻播放
瀏覽器可直接支持播放的視頻格式包括：.mp4,.WebM,Ogg
其他格式可能需要轉(zhuǎn)碼或者通過插件實(shí)現(xiàn)播放，我這里僅考慮這三種格式

<video controls src="" id="videoId" autoplay></video>

controls: 是否顯示視頻播放控件
autoplay：當(dāng)視頻加載完成或是否自動(dòng)播放
preload： 預(yù)加載
loop：循環(huán)播放
muted：靜音
video 上時(shí)間包括
播放：play();
暫停：pause();
具體使用方法，首先獲取元素

let videoElement=document.getElementByID("videoId") videoElement.duration ;//當(dāng)前視頻總時(shí)長(zhǎng) videoElement.currentTime ;//當(dāng)前視頻播放時(shí)間點(diǎn) videoElement.play(); // 視頻播放 videoElement.pause(); //視頻暫停// 可以對(duì)video進(jìn)行監(jiān)聽videoElement.addEventListener("loadstart",function(){ // 加載過程開始時(shí)觸發(fā) }) videoElement.addEventListener("durationchange",function(){ // 監(jiān)聽時(shí)長(zhǎng)變化時(shí)觸發(fā) }) videoElement.addEventListener("loadedmetadata",function(){ // 數(shù)據(jù)已加載時(shí)觸發(fā) }) videoElement.addEventListener("progress",function(){ // 瀏覽器下載 }) videoElement.addEventListener("canplay",function(){ // 可播放 }) videoElement.addEventListener("playing",function(){ // 當(dāng)視頻在已暫停或停止后已就緒時(shí)觸發(fā) }) videoElement.addEventListener("ended",function(){ // 當(dāng)視頻播放結(jié)束時(shí)觸發(fā) }) videoElement.addEventListener("error",function(){ // 當(dāng)視頻播放出錯(cuò)時(shí)觸發(fā) })

總結(jié)

以上是生活随笔為你收集整理的前端实现video播放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。