>html ~~~ <video id="myVideo" preload controls loop muted poster="封面" > <source src="視頻地址" type="video/mp4"/> </video> ~~~ >js ~~~ let myVideo = document.querySelector('#myVideo'); setTimeout(() => { console.log(myVideo.currentSrc); }, 1000) //設置音量為50% myVideo.volume = 0.5; //1、loadstart：視頻查找。當瀏覽器開始尋找指定的音頻/視頻時觸發，也就是當加載過程開始時 myVideo.addEventListener('loadstart', e => { console.log('視頻的元數據已加載'); console.log(e) }) // 2、durationchange：時長變化。當指定的音頻/視頻的時長數據發生變化時觸發，加載后，時長由 NaN 變為音頻/視頻的實際時長 myVideo.addEventListener('durationchange', function (e) { console.log('提示視頻的時長已改變') console.log(e) console.log(myVideo.duration) //4.08 視頻的實際時長（單位：秒） }) // 3、loadedmetadata ：元數據加載。當指定的音頻/視頻的元數據已加載時觸發，元數據包括：時長、尺寸（僅視頻）以及文本軌道 myVideo.addEventListener('loadedmetadata', function (e) { console.log('提示視頻的元數據已加載') console.log(e) }) // 8、play：播放監聽 myVideo.addEventListener('play', function (e) { console.log('提示該視頻正在播放中') console.log(e) }) // 9、pause：暫停監聽 myVideo.addEventListener('pause', function (e) { console.log('暫停播放') console.log(e) }) ~~~ ***** ### 微信瀏覽器自動播放和默認全屏 >在移動端瀏覽器，`video`在用戶點擊播放或者通過`API video.play()`觸發播放時，會強制以全屏置頂的形式進行播放，設計的初衷可能是因為全屏能提供更好的用戶體驗。 ~~~ <video id="player" controls autoplay x5-video-player-type="h5" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-orientation="portraint" x5-video-player-fullscreen="true"> <source src="..." type="video/mp4"> </video> ~~~ >`playsinline="true" webkit-playsinline="true`解決 iOS 自動播放全屏問題 >`x5-video-player-type="h5" x5-video-player-fullscreen="true"`解決安卓同層級播放 iOS 微信下通過 WeixinJSBridgeReady 事件進行自動播放 ~~~ document.addEventListener( 'WeixinJSBridgeReady', function() { var video = document.getElementById("player"); video.play(); }, false ); ~~~ Android 可以嘗試監聽 touchstart 事件，用戶觸摸屏幕后自動播放 ~~~ document.addEventListener('touchstart', function(){ var video = document.getElementById("player"); video.play(); }, false); ~~~ >HTML5視頻/音頻加載過程中會依次觸發如下事件： >1. loadstart; >2. durationchange; >3. loadedmetadata; >4. loadeddata; >5. progress; >6. canplay; >7. canplaythrough 1. 當瀏覽器開始尋找指定的音頻/視頻時，即開始加載視頻時，發生 loadstart 事件。 2. 當指定音頻/視頻的時長數據發生變化時，會發生 durationchange 事件。當音頻/視頻加載后，時長將由 "NaN" 變為音頻/視頻的實際時長。 3. 音頻/視頻的元數據包括：時長、尺寸（僅視頻）以及文本軌道。當指定的音頻/視頻的元數據已加載時，會發生 loadedmetadata 事件。 4. 當當前幀的數據已加載，但沒有足夠的數據來播放指定音頻/視頻的下一幀時，會發生 loadeddata 事件。 5. 當瀏覽器正在下載指定的音頻/視頻時，會發生 progress 事件。 6. 當瀏覽器能夠開始播放指定的音頻/視頻時，會發生 canplay 事件。 7. 當瀏覽器預計能夠在不停下來進行緩沖的情況下持續播放指定的音頻/視頻時，會發生 canplaythrough 事件。 ~~~ <video id="video1" controls="controls" loop></video> <script> myVid=document.getElementById("video1"); myVid.onduratiοnchange=alert("The video duration has changed"); myVid.onloadedmetadata=alert("Meta data for video loaded"); myVid.onduratiοnchange=alert("The video duration has changed"); myVid.οnlοadstart=alert("loadstart"); myVid.onduratiοnchange=alert("The video duration has changed"); myVid.onloadedmetadata=alert("Meta data for video loaded"); </script> ~~~