（1） video屬性

<!-- video 不支持 IE8及以下版本瀏覽器，支持三種視頻格式：MP4，WebM 和 Ogg --><video src="test.mp4" controls width="400" height="300"></video><!-- 禁止下載 --><video src="test.mp4" controls controlslist="nodownload" width="400" height="300"></video><!-- 禁止下載，禁止全屏 --><video src="test.mp4" controls controlslist="nodownload nofullscreen" width="400" height="300"></video><!-- 自動(dòng)播放 （不同瀏覽器的表現(xiàn)不一樣） --><video src="test.mp4" controls autoplay width="400" height="300"></video><!-- 默認(rèn)靜音播放（可手動(dòng)點(diǎn)開繼續(xù)播放） --><video src="test.mp4" controls muted width="400" height="300"></video><!-- 循環(huán)播放 --><video src="test.mp4" controls loop width="400" height="300"></video><!-- 預(yù)加載 --><video src="test.mp4" controls preload width="400" height="300"></video><!-- 貼圖 --><video src="test.mp4" poster="poster.jpg" controls width="400" height="300"></video><!-- 音量控制 --><video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video><script>var video = document.getElementById('_volume')video.volume = 2 // 取值范圍：0 到 1，0 是靜音，0.5 是一半的音量，1 是最大音量（默認(rèn)值）</script><!-- 播放時(shí)間控制 --><video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_time"></video><script>var video = document.getElementById('_time')console.log(video.currentTime) // 視頻當(dāng)前正在播放的時(shí)間（單位：s），進(jìn)度條拖到哪就顯示當(dāng)前的時(shí)間video.currentTime = 60 // 默認(rèn)從60秒處開始播放</script><!-- 播放地址切換 （常見于切換超清 高清 流暢，不同畫質(zhì)的視頻地址不同） --><video src="test.mp4" controls autoplay width="400" height="300" id="_src"></video><script>var video = document.getElementById('_src')console.log(video.src) // http://127.0.0.1:8001/test.mp4 絕對(duì)地址，DOM 中是相對(duì)地址// video.src = 'test-2.mp4' // 直接替換掉了原來的視頻srcsetTimeout(() => {video.src = 'test-2.mp4' // 播放到第 30s 的時(shí)候，自動(dòng)切換視頻}, 30000)</script><!-- 備用地址切換 --><video controls autoplay width="400" height="300" id="_source"><source src="test3.mp4" type="video/mp4" /><source src="test9.mp4" type="video/mp4" /><source src="test-2.mp4" type="video/mp4" /></video><script>var video = document.getElementById('_source')setTimeout(() => {console.log(video.currentSrc) // http://127.0.0.1:8001/test.mp4}, 1000)// HTTP 載入失敗，狀態(tài)碼 404。媒體資源 http://127.0.0.1:8001/test3.mp4 載入失敗。// HTTP 載入失敗，狀態(tài)碼 404。媒體資源 http://127.0.0.1:8001/test9.mp4 載入失敗。// http://127.0.0.1:8001/test-2.mp4// 當(dāng)?shù)谝欢我曨l加載失敗時(shí)，自動(dòng)加載下一段視頻

---

（2）video 事件

<video src="test.mp4" controls width="400" height="300" id="video"></video><script>var video = document.getElementById('video')// 1、loadstart：視頻查找。當(dāng)瀏覽器開始尋找指定的音頻/視頻時(shí)觸發(fā)，也就是當(dāng)加載過程開始時(shí)video.addEventListener('loadstart', function(e) {console.log('提示視頻的元數(shù)據(jù)已加載')console.log(e)console.log(video.duration) // NaN})// 2、durationchange：時(shí)長變化。當(dāng)指定的音頻/視頻的時(shí)長數(shù)據(jù)發(fā)生變化時(shí)觸發(fā)，加載后，時(shí)長由 NaN 變?yōu)橐纛l/視頻的實(shí)際時(shí)長video.addEventListener('durationchange', function(e) {console.log('提示視頻的時(shí)長已改變')console.log(e)console.log(video.duration) // 528.981333 視頻的實(shí)際時(shí)長（單位：秒）})// 3、loadedmetadata ：元數(shù)據(jù)加載。當(dāng)指定的音頻/視頻的元數(shù)據(jù)已加載時(shí)觸發(fā)，元數(shù)據(jù)包括：時(shí)長、尺寸（僅視頻）以及文本軌道video.addEventListener('loadedmetadata', function(e) {console.log('提示視頻的元數(shù)據(jù)已加載')console.log(e)})// 4、loadeddata：視頻下載監(jiān)聽。當(dāng)當(dāng)前幀的數(shù)據(jù)已加載，但沒有足夠的數(shù)據(jù)來播放指定音頻/視頻的下一幀時(shí)觸發(fā)video.addEventListener('loadeddata', function(e) {console.log('提示當(dāng)前幀的數(shù)據(jù)是可用的')console.log(e)})// 5、progress：瀏覽器下載監(jiān)聽。當(dāng)瀏覽器正在下載指定的音頻/視頻時(shí)觸發(fā)video.addEventListener('progress', function(e) {console.log('提示視頻正在下載中')console.log(e)})// 6、canplay：可播放監(jiān)聽。當(dāng)瀏覽器能夠開始播放指定的音頻/視頻時(shí)觸發(fā)video.addEventListener('canplay', function(e) {console.log('提示該視頻已準(zhǔn)備好開始播放')console.log(e)})// 7、canplaythrough：可流暢播放。當(dāng)瀏覽器預(yù)計(jì)能夠在不停下來進(jìn)行緩沖的情況下持續(xù)播放指定的音頻/視頻時(shí)觸發(fā)video.addEventListener('canplaythrough', function(e) {console.log('提示視頻能夠不停頓地一直播放')console.log(e)})// 8、play：播放監(jiān)聽video.addEventListener('play', function(e) {console.log('提示該視頻正在播放中')console.log(e)})// 9、pause：暫停監(jiān)聽video.addEventListener('pause', function(e) {console.log('暫停播放')console.log(e)})// 10、seeking：查找開始。當(dāng)用戶開始移動(dòng)/跳躍到音頻/視頻中新的位置時(shí)觸發(fā)video.addEventListener('seeking', function(e) {console.log('開始移動(dòng)進(jìn)度條')console.log(e)})// 11、seeked：查找結(jié)束。當(dāng)用戶已經(jīng)移動(dòng)/跳躍到視頻中新的位置時(shí)觸發(fā)video.addEventListener('seeked', function(e) {console.log('進(jìn)度條已經(jīng)移動(dòng)到了新的位置')console.log(e)})// 12、waiting：視頻加載等待。當(dāng)視頻由于需要緩沖下一幀而停止，等待時(shí)觸發(fā)video.addEventListener('waiting', function(e) {console.log('視頻加載等待')console.log(e)})// 13、playing：當(dāng)視頻在已因緩沖而暫停或停止后已就緒時(shí)觸發(fā)video.addEventListener('playing', function(e) {console.log('playing')console.log(e)})// 14、timeupdate：目前的播放位置已更改時(shí)，播放時(shí)間更新video.addEventListener('timeupdate', function(e) {console.log('timeupdate')console.log(e)})// 15、ended：播放結(jié)束video.addEventListener('ended', function(e) {console.log('視頻播放完了')console.log(e)})// 16、error：播放錯(cuò)誤video.addEventListener('error', function(e) {console.log('視頻出錯(cuò)了')console.log(e)})// 17、volumechange：當(dāng)音量更改時(shí)video.addEventListener('volumechange', function(e) {console.log('volumechange')console.log(e)})// 18、stalled：當(dāng)瀏覽器嘗試獲取媒體數(shù)據(jù)，但數(shù)據(jù)不可用時(shí)video.addEventListener('stalled', function(e) {console.log('stalled')console.log(e)})// 19、ratechange：當(dāng)視頻的播放速度已更改時(shí)video.addEventListener('ratechange', function(e) {console.log('ratechange')console.log(e)})</script>

總結(jié)

以上是生活随笔為你收集整理的video 属性和事件用法大全的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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