我們就得截取每個視頻的封面圖來,因?yàn)関ideo標(biāo)簽有個屬性poster是用來儲存封面圖地址的,但需注意先用本地視頻,非本地視頻會有跨域截取問題,這個得跟后端開發(fā)協(xié)作處理。這是一款截取視頻源的封面圖poster,監(jiān)聽視頻播放狀態(tài)的功能;
使用方法:
1、head引入css部分
<style>
.video-con{ width: 300px; height: 150px; position: relative; margin-bottom: 20px;}
.video-con .video{ width: 100%; height: 100%;}
.video-con .btn{ width: 64px; height: 64px; background: transparent url("img/play-btn.png") no-repeat;
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border: none;
}
.video-con .btn.pause{ background-image: url("img/pause-btn.png");}
</style>
2、body引入HTML代碼
<div class="video-con">
<video class="video" poster="">
<source src="mp4/1.mp4" >
</video>
<button type="button" class="btn js-play-btn"></button>
</div>
<!--html5的video-->
<script type="text/javascript">
// 視頻------視頻截圖 ~~ 視頻播放狀態(tài) ~~
const setMedia = function(video, scale = 0.8) {
// 設(shè)置poster屬性:(非本地視頻資源會有跨域截圖問題)
video.addEventListener('loadeddata', function(e) {
// 拿到圖片
let canvas = document.createElement('canvas');
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
let src = canvas.toDataURL('image/png');
// 顯示在dom,測試用
(function(flag = true) {
if (!flag) {return;}
let img = document.createElement('img');
img.src = src;
document.body.appendChild(img);
})(0);
// 設(shè)置屬性
video.setAttribute('poster', src);
});
// -------------------------------------------------------------------------------------
//檢測視頻播放狀態(tài):
//播放按鈕
let playBtn = video.parentNode.childNodes[2].nextSibling;
//設(shè)置狀態(tài)
function vidplaySate(e) {
if (video.paused) {
video.play();
playBtn.classList.add('pause');
} else {
video.pause();
playBtn.classList.remove('pause');
}
}
//點(diǎn)擊監(jiān)聽
video.addEventListener('click', vidplaySate, false);
playBtn.addEventListener('click', vidplaySate, false);
//結(jié)束監(jiān)聽
video.addEventListener('ended',function () {
playBtn.classList.remove('pause');
});
};
//視頻:
let videos = document.querySelectorAll('video');
videos.forEach((video) => {
setMedia(video);
});
</script>