html5 video 如何获取视频第一帧

时间 2019-11-30

标签 html5 html video 如何获取视频第一栏目 HTML5 繁體版

原文原文链接

代码我已经托管到 github上，有须要的小伙伴自行下载查阅~html

欢迎提pullRequest or star

提供可供选择的视频连接（下载使用）

一、视频是同源的，不然须要处理跨域问题

var initialize = function() {
      output = document.getElementById("output");
      video = document.getElementById("video");
      video.addEventListener('loadeddata',captureImage);
    };复制代码

二、截取第一帧代码

canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);复制代码

三、建立canvas

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);
      
      img = document.createElement("img");
      img.src = canvas.toDataURL("image/jpeg", 1.0);
      output.appendChild(img);
    };复制代码

四、poster html5原生属性

document.getElementById('video').setAttribute('poster','./cat.jpeg') //设置任意图片第一帧复制代码