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

思路梳理：

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

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

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

 

html部分：

<video ref="curVideo" autoplay="autoplay" preload="metadata" webkit-playsinline="true" playsinline="true"
                  x-webkit-airplay="allow" x5-video-player-type="h5" x5-video-player-fullscreen="true"
                  x5-video-orientation="portraint" style="object-fit:fill" controls="controls" width="300"
                  height="300" loop="loop" >
   您的浏览器不支持视频播放。
</video>
<input ref="videoRef" type="file" accept="video/*" @change="determineLengthOfVideo" preload="metadata" >

 

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：（究极办法）

<video id="netVideo" 
    v-show="formData.videoUrl !== ''" 
    :src="localVideoUrl" 
    controls="controls" 
    width="100%"               
    height="300px" 
    loop="loop" 
    autoplay="autoplay"
    webkit-playsinline="" 
    playsinline="" 
    x-webkit-airplay="allow"
    x5-video-player-type="" 
    x5-video-player-fullscreen="true" 
    x5-video-orientation="portraint" 
    style="background-color: #000000;">
        您的浏览器不支持视频播放。
</video>

<script>
    import WX from 'weixin-js-sdk';
    
    methods: {
      setWxJsSDK() {
        this.$axios.post(//请求后端，获取签名)
          .then(res => {
            if (res.data.status === 0) {
              let data = res.data.data;

              WX.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: APPID, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.noncestr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名
                jsApiList: [] // 必填，需要使用的JS接口列表
              });

              WX.ready(function() {
                document.getElementById('netVideo').play();
              })

            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    }


</script>