HTML5 單個或者多個Video標籤視訊載入第一幀方法（poster屬性）
阿新 • • 發佈：2019-02-02
最近在做這個前端視訊載入第一幀的功能，查了很多資料基本上有兩種思路：
一、canvas畫圖取base64格式編碼設定poster屬性的方法；
二、給定圖片設定在視訊上方，點選圖片隱藏起來，視訊追加播放事件。
我就在此提供方法一所需要的程式碼，也是自己用到的，不足之處，還望指教。
1、單個video標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<video 2、多個video標籤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<div id="video">
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "",
data: "",
success: function (data) {
var videoContent = "";//宣告鍋子接收後臺返回列表
var count = 0; //宣告變數 為了拼接不同的ID值方便查詢新增poster屬性值
var list = data.list;
if(list.length>0){//這些大家應該都知道，是後臺返回值，我們遍歷。
for(var i=0;i<list.length;i++){
videoContent+="<video id='videoId"+count+"' src='"+list[i].url+"'controls width='100%' ></video>";
}
$("#video").html(videoContent);
//敲黑板 重點來了 就不註釋了、跟單個video標籤差不多。
for(var j=0; j<count; j++) {
$("#videoId"+j).on("loadeddata", function (e) {
var obj = e.target;
var scale = 0.8;
var canvas = document.createElement("canvas");
canvas.width = obj.videoWidth * scale;
canvas.height = obj.videoHeight * scale;
canvas.getContext('2d').drawImage(obj, 0, 0, canvas.width, canvas.height);
obj.setAttribute("poster", canvas.toDataURL("image/png"));
} )
}
}else{
alert("沒有查到視訊內容");
}
},
error: function () {
alert("emmmmmmm...")
}
})
</script>
</body>
</html>注： 移動端專案webApp中用到的功能，但是實際測試，不支援部分機型，還希望各路大神不吝賜教，感謝！