关于微信浏览器video不自动播放并且获取第一帧和总时长的问题

关于微信浏览器video标签获取第一帧和总时长的问题

最近项目中需要上传视频并限制播放时长。还要展示第一帧画面

技术实现。通过Input file 获取上传的视频资源，读取之后转成blob，放到video标签上。然后获取第一帧和视频时长。

问题来了

在pc开发的时候。video标签可以自动获取到第一帧。然后video onloadeddata的方法。可以获取时间。
但是在微信端因为视频是不能自动播放的。也就是不能出发onloadeddata方法。获取不到第一帧。并且微信浏览器video标签，获取不到第一帧图像。

解决方案
项目是vue。这里只介绍方法。不介绍样式。样式大家自己根据ui稿。

   <video
        ref="video"
        src
        alt
        class="img_video"
        muted="true" //静音  某些文章说设置muted然后设置autoplay可以自动播放，然后并没有什么用。出于玄学。没有删除
        id="video"
        x5-playsinline="true" //微信自动播放会全屏播放，设置此属性 可以小窗口播放
        playsinline="true"
        webkit-playsinline
        autoplay
        controls
        preload="preload"
      ></video>
       <input
            class="file_video"
            type="file"
            accept="video/*"
            ref="file_video"
            id="file_video"
            @change="addVideo"
          />
methods:{
	getObjectURL....
	addVideo...
}
 getObjectURL(file) { //转换成blob对象 不要问。
      var url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
  addVideo(event) {
      let inputDOM = this.$refs.file_video; //这里获取input dom
      let fil = inputDOM.files[0]; //获取file对象
      if (!inputDOM) return;//如果没获取到返回
      var reader = new FileReader(); //创建一个render对象
      var _this = this;
      reader.onload = function() {//读取文件
        var videoDom = document.getElementById("video"); //获取video Dom
        videoDom.src = _this.getObjectURL(fil); //把视频放到video标签上
        wx.config({ //这里接入微信sdk 配置信息，对错无所谓。为什么 后面讲
          // 配置信息, 即使不正确也能使用 wx.ready
          debug: false,
          appId: "gh_1a8c118653f8",
          timestamp: 1,
          nonceStr: "",
          signature: "",
          jsApiList: []
        });
        wx.ready(function() { //播放。为什么这里不直接dom.play()。妈**** 因为微信不让啊。我也很无奈啊。
          videoDom.play();
        });
        videoDom.onloadeddata = function() { //只有加载之后才能获取到时长
          // 这里可以打印视频时长
          _this.video = _this.getObjectURL(fil); //这里是一个标识。可以忽略
          var canvas = document.createElement("canvas"); //创建canvas对象
          canvas.width = 300; //画布宽度
          canvas.height = (300 * this.videoHeight) / this.videoWidth; //画布高度
          canvas
            .getContext("2d")
            .drawImage(this, 0, 0, canvas.width, canvas.height); //绘制第一帧
          setTimeout(() => { //这里为什么延迟到下次执行。因为有的时候。绘制不到。很奇怪。
            document.getElementById("video-poster").src = canvas.toDataURL();
          }, 0);
          if (this.duration < 120 && this.duration > 30) { //限制时间在30s-120s之间
            _this.isShow = true;
            这里上传视频
          } else {
            _this.toast("请上传30秒~2分钟以内的视频");
            _this.video = "";
            _this.del_video();
          }
        };
      };
      reader.readAsDataURL(fil);
    },

重点
1.接入微信sdk。配置信息，无所谓对错。配置了在wx.reday中让视频播放
2.只有视频开始播放了才能出发这个onloadeddata事件
3.要在onloadeddata中绘制第一帧。