html5设置视频显示第一帧,【前端】如何在video上显示视频的第一帧

移动端 如何在video上显示视频的第一帧？能写下具体代码吗？ 谢谢了

回答

video标签有个poster属性，事先截好封面放进去就行

是啊 但是怎么截呢 前端能实现吗？

视频第一帧图片：

(function(){

var video, output;

var scale = 0.8;

var initialize = function() {

output = document.getElementById("output");

video = document.getElementById("video");

video.addEventListener('loadeddata',captureImage);

};

var captureImage = function() {

var 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);

var img = document.createElement("img");

img.src = canvas.toDataURL("image/png");

img.width = 400;

img.height = 300;

output.appendChild(img);

};

initialize();

})();