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

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

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

let videoElement=document.getElementByID("videoId") videoElement.duration ;//當前視頻總時長 videoElement.currentTime ;//當前視頻播放時間點 videoElement.play(); // 視頻播放 videoElement.pause(); //視頻暫停// 可以對video進行監聽videoElement.addEventListener("loadstart",function(){ // 加載過程開始時觸發 }) videoElement.addEventListener("durationchange",function(){ // 監聽時長變化時觸發 }) videoElement.addEventListener("loadedmetadata",function(){ // 數據已加載時觸發 }) videoElement.addEventListener("progress",function(){ // 瀏覽器下載 }) videoElement.addEventListener("canplay",function(){ // 可播放 }) videoElement.addEventListener("playing",function(){ // 當視頻在已暫?；蛲Ｖ购笠丫途w時觸發 }) videoElement.addEventListener("ended",function(){ // 當視頻播放結束時觸發 }) videoElement.addEventListener("error",function(){ // 當視頻播放出錯時觸發 })

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。