美文网首页JavaScript
video视频强制自动播放500毫秒,将视频第一帧用canvas

video视频强制自动播放500毫秒,将视频第一帧用canvas

作者: 蔚完待旭 | 来源:发表于2020-11-11 18:25 被阅读0次

video视频强制自动播放500毫秒

document.addEventListener("WeixinJSBridgeReady", function () {
  video.play();
  setTimeout(()=>{
    video.pause();
  },500)
},false)

将视频第一帧用canvas画出来

      getVideoBase64() {
        let video = document.querySelector('video');
        let dataURL = '';
        let output = document.getElementById("output");
        let img = document.createElement("img");
        vid.setAttribute('crossOrigin', 'anonymous');//处理跨域
        vid.addEventListener('loadeddata', function () {
          let canvas = document.createElement("canvas"),
            width = vid.offsetWidth, //canvas的尺寸和图片一样
            height = vid.offsetHeight;
          canvas.width = width;
          canvas.height = height;
          canvas.getContext("2d").drawImage(vid, 0, 0, width, height); //绘制canvas
          dataURL = canvas.toDataURL('image/png'); //转换为base64
          img.src = dataURL;
          img.width = width;
          img.height = height;
          output.appendChild(img);
          vid.setAttribute("poster",dataURL);
        })
      },

相关文章

网友评论

    本文标题:video视频强制自动播放500毫秒,将视频第一帧用canvas

    本文链接:https://www.haomeiwen.com/subject/ipfgvktx.html