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> <!-- 自動播放 （不同瀏覽器的表現不一樣） --> <video src="test.mp4" controls autoplay width="400" height="300"></video> <!-- 默認靜音播放（可手動點開繼續播放） --> <video src="test.mp4" controls muted width="400" height="300"></video> <!-- 循環播放 --> <video src="test.mp4" controls loop width="400" height="300"></video> <!-- 預加載 --> <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 是最大音量（默認值） </script> <!-- 播放時間控制 --> <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) // 視頻當前正在播放的時間（單位：s），進度條拖到哪就顯示當前的時間 video.currentTime = 60 // 默認從60秒處開始播放 </script> <!-- 播放地址切換 （常見於切換超清 高清 流暢，不同畫質的視頻地址不同） --> <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 絕對地址，DOM 中是相對地址 // video.src = 'test-2.mp4' // 直接替換掉了原來的視頻src setTimeout(() => { video.src = 'test-2.mp4' // 播放到第 30s 的時候，自動切換視頻 }, 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 載入失敗，狀態碼 404。媒體資源 http://127.0.0.1:8001/test3.mp4 載入失敗。 // HTTP 載入失敗，狀態碼 404。媒體資源 http://127.0.0.1:8001/test9.mp4 載入失敗。 // http://127.0.0.1:8001/test-2.mp4 // 當第一段視頻加載失敗時，自動加載下一段視頻
2.video 事件
<script> var video = document.getElementById('video') // 1、loadstart：視頻查找。當瀏覽器開始尋找指定的音頻/視頻時觸發，也就是當加載過程開始時 video.addEventListener('loadstart', function(e) { console.log('提示視頻的元數據已加載') console.log(e) console.log(video.duration) // NaN }) // 2、durationchange：時長變化。當指定的音頻/視頻的時長數據發生變化時觸發，加載后，時長由 NaN 變為音頻/視頻的實際時長 video.addEventListener('durationchange', function(e) { console.log('提示視頻的時長已改變') console.log(e) console.log(video.duration) // 528.981333 視頻的實際時長（單位：秒） }) // 3、loadedmetadata ：元數據加載。當指定的音頻/視頻的元數據已加載時觸發，元數據包括：時長、尺寸（僅視頻）以及文本軌道 video.addEventListener('loadedmetadata', function(e) { console.log('提示視頻的元數據已加載') console.log(e) }) // 4、loadeddata：視頻下載監聽。當當前幀的數據已加載，但沒有足夠的數據來播放指定音頻/視頻的下一幀時觸發 video.addEventListener('loadeddata', function(e) { console.log('提示當前幀的數據是可用的') console.log(e) }) // 5、progress：瀏覽器下載監聽。當瀏覽器正在下載指定的音頻/視頻時觸發 video.addEventListener('progress', function(e) { console.log('提示視頻正在下載中') console.log(e) }) // 6、canplay：可播放監聽。當瀏覽器能夠開始播放指定的音頻/視頻時觸發 video.addEventListener('canplay', function(e) { console.log('提示該視頻已准備好開始播放') console.log(e) }) // 7、canplaythrough：可流暢播放。當瀏覽器預計能夠在不停下來進行緩沖的情況下持續播放指定的音頻/視頻時觸發 video.addEventListener('canplaythrough', function(e) { console.log('提示視頻能夠不停頓地一直播放') console.log(e) }) // 8、play：播放監聽 video.addEventListener('play', function(e) { console.log('提示該視頻正在播放中') console.log(e) }) // 9、pause：暫停監聽 video.addEventListener('pause', function(e) { console.log('暫停播放') console.log(e) }) // 10、seeking：查找開始。當用戶開始移動/跳躍到音頻/視頻中新的位置時觸發 video.addEventListener('seeking', function(e) { console.log('開始移動進度條') console.log(e) }) // 11、seeked：查找結束。當用戶已經移動/跳躍到視頻中新的位置時觸發 video.addEventListener('seeked', function(e) { console.log('進度條已經移動到了新的位置') console.log(e) }) // 12、waiting：視頻加載等待。當視頻由於需要緩沖下一幀而停止，等待時觸發 video.addEventListener('waiting', function(e) { console.log('視頻加載等待') console.log(e) }) // 13、playing：當視頻在已因緩沖而暫停或停止后已就緒時觸發 video.addEventListener('playing', function(e) { console.log('playing') console.log(e) }) // 14、timeupdate：目前的播放位置已更改時，播放時間更新 video.addEventListener('timeupdate', function(e) { console.log('timeupdate') console.log(e) }) // 15、ended：播放結束 video.addEventListener('ended', function(e) { console.log('視頻播放完了') console.log(e) }) // 16、error：播放錯誤 video.addEventListener('error', function(e) { console.log('視頻出錯了') console.log(e) }) // 17、volumechange：當音量更改時 video.addEventListener('volumechange', function(e) { console.log('volumechange') console.log(e) }) // 18、stalled：當瀏覽器嘗試獲取媒體數據，但數據不可用時 video.addEventListener('stalled', function(e) { console.log('stalled') console.log(e) }) // 19、ratechange：當視頻的播放速度已更改時 video.addEventListener('ratechange', function(e) { console.log('ratechange') console.log(e) }) </script>
3.基本示例
<video id="video" style="object-fit:fill" autoplay webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" src="video.mp4" /> </video> <!-- object-fit: fill 視頻內容充滿整個video容器 poster:"img.jpg" 視頻封面 autoplay： 自動播放 auto - 當頁面加載后載入整個視頻 meta - 當頁面加載后只載入元數據 none - 當頁面加載后不載入視頻 muted：當設置該屬性后，它規定視頻的音頻輸出應該被靜音 webkit-playsinline playsinline: 內聯播放 x5-video-player-type="h5" : 啟用x5內核H5播放器（移動端隱藏播放控件） x5-video-player-fullscreen="true" 全屏設置。ture和false的設置會導致布局上的不一樣 x5-video-orientation="portraint" ：聲明播放器支持的方向，可選值landscape 橫屏,portraint豎屏。 默認值portraint。無論是直播還是全屏H5一般都是豎屏播放， 但是這個屬性需要x5-video-player-type開啟H5模式 -->
.監控下載進度
// 視頻時長
var duration = video.duration
// 獲取視頻已經下載的時長
function getEnd(video) {
var end = 0
try {
end = video.buffered.end(0) || 0
end = parseInt(end * 1000 + 1) / 1000
} catch(e) {
}
return end
}
移動端填坑
<video id="video" style="object-fit:fill" autoplay webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" src="video.mp4" /> </video> <!-- object-fit: fill 視頻內容充滿整個video容器 poster:"img.jpg" 視頻封面 autoplay： 自動播放 auto - 當頁面加載后載入整個視頻 meta - 當頁面加載后只載入元數據 none - 當頁面加載后不載入視頻 muted：當設置該屬性后，它規定視頻的音頻輸出應該被靜音 webkit-playsinline playsinline: 內聯播放 x5-video-player-type="h5" : 啟用x5內核H5播放器 x5-video-player-fullscreen="true" 全屏設置。ture和false的設置會導致布局上的不一樣 x5-video-orientation="portraint" ：聲明播放器支持的方向，可選值landscape 橫屏,portraint豎屏。 默認值portraint。無論是直播還是全屏H5一般都是豎屏播放， 但是這個屬性需要x5-video-player-type開啟H5模式 -->
自動播放
-
設置autoplay屬性
-
<video autoplay></video>
-
移動瀏覽器中
但是在很多移動瀏覽器里，都是要求用戶的真實操作來（touchend、click、doubleclick 或 keydown 事件等標准的事件）觸發調用video.play(),才能自動播放影音視頻。
dom.addEventListener('click', function () {
video.play()
})
-
微信中
也可以在 wx.ready()里觸發video.play()
wx.ready(function () {
video.play()
})
內聯播放
-
設置屬性
webkit-playsinline playsinline -
<video id="video" webkit-playsinline playsinline /></video>
在iOS Safari和一些安卓的一些瀏覽器下播放視頻的時候，不能在h5頁面中播放視頻，系統會自動接管視頻
如果需要在h5頁面內播放視頻，需要在視頻標簽上加上 webkit-playsinline，在iOS10以后，需要加上playsinline,建議同時加上這兩個屬性。同時還需要app支持這種模式
webview.allowsInlineMediaPlayback = YES;
ios手Q和微信都支持這種模式，但是android 微信就掛了
-
android 微信
android微信內置瀏覽器采用騰訊X5內核，不遵循X5web標准，video強制全屏就是其一。視頻播放完畢后還會出現QQ自己的視頻推薦
據說，其有個白名單，白名單下的視頻資源，就不會全屏。但是騰訊已經不能再增加白名單了。尿性，無解。。。。。。
目前還有一個解決辦法，就是使用h5 canvas 播放 video
-
canvas 播放視頻
使用canvas 遇到的坑：video 必須加 x5-video-player-type="h5" 屬性，否則，在移動端就會卡死不能播放視頻，個人認為是因為視頻被接管的原因導致。
<div class="wrapper">
<video id="video" style="display: none" autoplay src="video.mp4" x5-video-player-type="h5"></video>
<canvas id="canvas"></canvas>
</div>
<script>
var video = document.querySelector('#video')
var canvas = document.querySelector('#canvas')
var wrapper = canvas.parentNode
var width = wrapper.offsetWidth
var height = wrapper.offsetHeight
var ctx = c.getContext('2d')
var time = null
canvas.width = width
canvas.height = height
canvas.addEventListener('click', function () {
video.play()
})
video.addEventListener('play', function () {
time = window.setInterval(function () {
ctx.drawImage(v, 0, 0, width, height);
}, 20);
}, false);
video.addEventListener('pause', function () {
window.clearInterval(time);
}, false);
video.addEventListener('ended', function () {
window.clearInterval(time);
}, false);
</script>
最后發現，雖然使用canvas播放視頻，android微信中可以屏蔽全屏視頻播放完的推薦視頻。但是還沒辦法禁止視頻播放時 的全屏問題。還是得萬惡的白名單。吐槽。。。。。。。。。。。。。。。。
更坑爹的是沒有找到js觸發退出全屏的方法。
ios黑屏問題
ios 在播放視頻時，會出現短暫的黑屏，然后正常顯示。
解決方法：
在視頻上層覆蓋一個 添加一個div並用一張圖片填充，制造播放前加載假象。然后監聽事件 timeupdate ，視頻播放有畫面時移除這個“div塊”
video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){ posterImg.hidden(); } }) Media 方法和屬性
HTMLVideoElement和HTMLAudioElement 均繼承自HTMLMediaElement
// 媒體錯誤 MediaObj.error; //null:正常 MediaObj.error.code; //1.用戶終止 2.網絡錯誤 3.解碼錯誤 4.URL無效 //媒體當前狀態 MediaObj.currentSrc; //返回當前資源的URL MediaObj.src = value; //返回或設置當前資源的URL MediaObj.canPlayType(type); //是否能播放某種格式的資源 MediaObj.networkState; //0.此元素未初始化 1.正常但沒有使用網絡 2.正在下載數據 3.沒有找到資源 MediaObj.load(); //重新加載src指定的資源 MediaObj.buffered; //返回已緩沖區域，TimeRanges MediaObj.preload; //none:不預載 metadata:預載資源信息 auto: //准備狀態 MediaObj.readyState;//1:HAVE_NOTHING //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATA MediaObj.seeking; //是否正在seeking //回放狀態 MediaObj.currentTime = value; //當前播放的位置，賦值可改變位置 MediaObj.startTime; //一般為0，如果為流媒體或者不從0開始的資源，則不為0 MediaObj.duration; //當前資源長度 流返回無限 MediaObj.paused; //是否暫停 MediaObj.defaultPlaybackRate = value;//默認的回放速度，可以設置 MediaObj.playbackRate = value;//當前播放速度，設置后馬上改變 MediaObj.played; //返回已經播放的區域，TimeRanges，關於此對象見下文 MediaObj.seekable; //返回可以seek的區域 TimeRanges MediaObj.ended; //是否結束 MediaObj.autoPlay; //是否自動播放 MediaObj.loop; //是否循環播放 MediaObj.play(); //播放 MediaObj.pause(); //暫停 //視頻控制 MediaObj.controls;//是否有默認控制條 MediaObj.volume = value; //音量 MediaObj.muted = value; //靜音 //TimeRanges(區域)對象 TimeRanges.length; //區域段數 TimeRanges.start(index) //第index段區域的開始位置 TimeRanges.end(index) //第index段區域的結束位置 //【★★★**相關事件**★★★】 //事件分發 var eventTester = function(e){ Media.addEventListener(e,function(){ console.log((new Date()).getTime(),e) },false); } //事件監聽 eventTester("loadstart"); //客戶端開始請求數據 eventTester("progress"); //客戶端正在請求數據 eventTester("suspend"); //延遲下載 eventTester("abort"); //客戶端主動終止下載（不是因為錯誤引起） eventTester("loadstart"); //客戶端開始請求數據 eventTester("progress"); //客戶端正在請求數據 eventTester("suspend"); //延遲下載 eventTester("abort"); //客戶端主動終止下載（不是因為錯誤引起）， eventTester("error"); //請求數據時遇到錯誤 eventTester("stalled"); //網速失速 eventTester("play"); //play()和autoplay開始播放時觸發 eventTester("pause"); //pause()觸發 eventTester("loadedmetadata");