最近在做这个前端视频加载第一帧的功能,查了很多资料基本上有两种思路:
一、canvas画图取base64格式编码设置poster属性的方法;
二、给定图片设置在视频上方,点击图片隐藏起来,视频追加播放事件。
我就在此提供方法一所需要的代码,也是自己用到的,不足之处,还望指教。
1、单个video标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<video id="video" controls="controls" src="YOUR VIDEO URL">
很抱歉,您的浏览器不支持播放标签!
</video>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
(function() {
"use strict";//严格模式
var video;//video标签
var scale = 0.8;//第一帧图片与源视频的比例
video = $("#video").get(0);//赋值标签
video.on("loadeddata", function () {//加载完成事件,调用函数
var canvas = document.createElement("canvas");//canvas画布
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//画图
video.setAttribute("poster", canvas.toDataURL("image/png"));//关键一步 —— 设置标签的 poster 属性的值为 base64 编译过后的canvas绘图。
})
}());
</script>
</body>
</html>
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中用到的功能,但是实际测试,不支持部分机型,还希望各路大神不吝赐教,感谢!