php 视频第一帧封面,video标签获取第一帧的图片作为预览图

video其实有 poster 属性的。 如果有这个属性 浏览器 会自动把第一帧当做展示图， 但是移动端有的手机不支持。

我们 poster = ‘图片链接’ ,  这样是可以把图片当做视频的预览图。

那没有图片链接怎么办：

注意：以下方法的视频连接，必须和文件在同一个域名下，否则不生效！！！

html>

 视频第一帧图片：

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

})();