在日常項目中，html5的video標簽還是比較常用到的淤击，開發(fā)過程中匠抗，我們都會使用到，通過監(jiān)聽video標簽的播放污抬、暫停汞贸、停止等等來使用；
但我們是否也會遇到過印机，有些瀏覽器在顯示這標簽矢腻，兼容不太友好，video標簽的封面是一層黑色的耳贬，而不是視頻的封面圖踏堡。
那么，此時咒劲，我們就得截取每個視頻的封面圖來顷蟆，因為video標簽有個屬性poster是用來儲存封面圖地址的诫隅，但需注意先用本地視頻，非本地視頻會有跨域截取問題帐偎，這個得跟后端開發(fā)協(xié)作處理逐纬。
代碼如下：
<div class="video-con">
<video class="video"? poster="">
? ? ? ? <source src="1.mp4" >
? ? </video>
? ? <button type="button" class="btn js-play-btn"></button>
</div>
<div class="video-con">
? ? <video class="video" poster="">
? ? ? ? <source src="2.mp4" >
? ? </video>
? ? <button type="button" class="btn js-play-btn"></button>
</div>
//視頻------視頻截圖 ~~ 視頻播放狀態(tài) ~~
constsetMedia=function(video,scale=0.8) {
//設置poster屬性：（非本地視頻資源會有跨域截圖問題）
video.addEventListener('loadeddata',function(e) {
//拿到圖片
letcanvas=document.createElement('canvas');
canvas.width=video.videoWidth*scale;
canvas.height=video.videoHeight*scale;
canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);
letsrc=canvas.toDataURL('image/png');
//顯示在dom，測試用
(function(flag=true) {
if(!flag) {return;}
letimg=document.createElement('img');
img.src=src;
document.body.appendChild(img);
})(0);
//設置屬性
video.setAttribute('poster', src);
? ? ? ? });
//-------------------------------------------------------------------------------------
//檢測視頻播放狀態(tài)：
//播放按鈕
letplayBtn=video.parentNode.childNodes[2].nextSibling;
//設置狀態(tài)
functionvidplaySate(e) {
if(video.paused) {
video.play();
playBtn.classList.add('pause');
}else{
video.pause();
playBtn.classList.remove('pause');
? ? ? ? ? ? }
? ? ? ? }
//點擊監(jiān)聽
video.addEventListener('click', vidplaySate,false);
playBtn.addEventListener('click', vidplaySate,false);
//結束監(jiān)聽
video.addEventListener('ended',function() {
playBtn.classList.remove('pause');
? ? ? ? });
? ? };
//視頻：
letvideos=document.querySelectorAll('video');
videos.forEach((video)=>{
setMedia(video);
? ? });
有什么錯誤或優(yōu)化的地方削樊，可以提出來豁生，大家一起學習研究…
整個案例，可以訪問本人github下載：https://github.com/xiexikang/html5-video-poster
