video视频强制自动播放500毫秒，将视频第一帧用canvas画出来

最新推荐文章于 2024-02-04 16:46:44 发布

weiwandaixu_zx

最新推荐文章于 2024-02-04 16:46:44 发布

阅读量815

点赞数

分类专栏：小案例文章标签： canvas javascript js

本文链接：https://blog.youkuaiyun.com/weiwandaixu_zx/article/details/109680039

版权

小案例专栏收录该内容

7 篇文章

订阅专栏

这篇博客介绍了如何使用JavaScript在微信环境下强制视频自动播放并延迟500毫秒暂停，同时展示了如何捕获视频第一帧并将其转化为canvas图像，再以base64格式保存和展示。此外，还讨论了跨域视频资源的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

let video = document.querySelector('video');
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);
        })
      },