微信浏览器 vue项目中预览本地视频，video :src=“”动态赋值无效的解决方案（自动播放）

思路梳理：

H5获取本地视频的时长duration，原理就是通过input file导入文件，通过window.createObjectURL创建文件的本地url，赋值给video src，然后获取时长。

这里面有一个问题：就是只有当这个视频被播放后，js才可以获取到video资源实例，才能拿到duration。

所以就有了下面的一些操作。

 

html部分：

 

js部分： 

determineLengthOfVideo() {

        let _this = this;

        Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true, // 禁用背景点击
          message: '正在读取...'
        });

        // let fileTemp = file.file;
        let fileTemp = this.$refs['videoRef'].files[0];
        console.log('determineLengthOfVideo fileTemp', fileTemp);

        let getUrl = null;
        if (window.createObjectURL != undefined) { // basic
          getUrl = window.createObjectURL(fileTemp);

        } else if (window.URL != undefined) { // mozilla(firefox)
          getUrl = window.URL.createObjectURL(fileTemp);

        } else if (window.webkitURL != undefined) { // webkit or chrome
          getUrl = window.webkitURL.createObjectURL(fileTemp);

        }

        //给 ref:curVideo 动态赋值
        let curVideoDom = _this.$refs['curVideo'];
        curVideoDom.src = getUrl;
        curVideoDom.play();

        // 轮询视频时长，得到时长后清除定时器
        let hasDuration = setInterval(() => {

          let curVideoDuration = _this.$refs['curVideo'].duration;
          if (curVideoDuration) {
            console.log('curVideoDuration', curVideoDuration);
            Toast.clear();
            _this.formData.curVideoDuration = curVideoDuration;
            clearInterval(hasDuration);
            if (curVideoDuration > 15) {
              Notify({
                message: '视频时长不可超过15秒',
                duration: 5000
              });
            } else {
              let temp = {
                content: '',
                file: fileTemp
              }

             //执行上传
              _this.onAfterRead(temp, {
                name: 'videoUpload'
              });
            }
          }
        }, 10)
      }

兼容ios

为什么 IOS 下微信和钉钉可以自动播放带声音的视频？

确实发现在微信经常能看到自动播放的H5，但是作者自己写的设置了 autoplay、playsInline 的视频播放样例，在微信上依旧无法自动播放，而在钉钉上却可以自动播放

系统-浏览器	带声音	不带声音
IOS 钉钉	支持	支持
IOS Safari	禁止	自动播放
IOS 微信	禁止	禁止

通过查询资料，IOS WebAPP 开发都是基于 IOS 提供的浏览器内核进行开发的，所以在 WebAPP 的 webview 中可以修改自动播放的表现，钉钉明显是支持自动播放，微信则是禁止自动播放，但是提供了内置事件来支持自动播放：

自动播放方式1：

微信下通过 WeixinJSBridgeReady 事件进行自动播放:

//兼容微信内置浏览器 视频自动播放，用于本地视频预览
      audioAutoPlay(id) {
        var audio = document.getElementById(id);
        audio.play();
        audio.pause();

        var myPlay = function() {
          document.removeEventListener("WeixinJSBridgeReady", myPlay);
          document.removeEventListener("YixinJSBridgeReady", myPlay);

          audio.play();
          audio.pause();
          // document.removeEventListener("touchstart", play, false);
        };
        //weixin 监听到，执行play
        document.addEventListener("WeixinJSBridgeReady", myPlay, false);
        //yixin
        document.addEventListener('YixinJSBridgeReady', myPlay, false);
        // document.addEventListener("touchstart", play, false);
      },

 

自动播放方式2：（究极办法）