<html>
<head>
<title>設定視頻封面為視頻第一幀</title>
<style>
.video{
width:500px;
height:300px;
}
</style>
</head>
<body>
<!--<video src="https://bbs.csdn.net/topics/img/ce.mp4" onloadeddata="https://bbs.csdn.net/topics/showFrame(event)" controls="controls" calss="video">
</video>-->
<video onloadeddata="https://bbs.csdn.net/topics/showFrame(event)" src="https://bbs.csdn.net/topics/img/ce.mp4" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-orientation="h5" preload="auto" width="420" height="280" controls="controls" calss="video">
<source src="https://bbs.csdn.net/topics/img/tuyu2.mp4" type="video/mp4">
</video>
<img src="" id="img">
<script>
function showFrame(event) {
let scale = 0.8,video = event.target,
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);
try {
console.log(canvas.toDataURL("image/png"))
document.getElementById("img").src=https://bbs.csdn.net/topics/canvas.toDataURL("image/png");
video.setAttribute("poster", canvas.toDataURL("image/png"));
}
catch (err) {
console.log("Error: " + err);
}
}
</script>
</body>
</html>
這個在手機端沒有效果，在電腦上可以生成封面圖，手機端不行
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/38910.html
標籤：JavaScript
下一篇：筆趣小說下載