微信小程序 - webview组件打开H5页面视频录制上传

需求：微信小程序内嵌H5页面需要一个录制视频上传功能

使用input来调起手机摄像头进行视频录制

<button @click="openVideo">开始录制</button>
<input ref="inputVideo" type="file" name="video" id="video-input" accept="video/*"capture="camcorder" @change="videoChange($event)" hidden/>

点击button实现调起录制摄像头

//点击button实现调起录制摄像头
openVideo() {
  this.$refs.inputVideo.click();
},

获取视频文件进行上传

videoChange(e) {
  let file = e.target.files[0];
  let url = URL.createObjectURL(file);
  let audioEle = new Audio(url);
  let dataFile = new FormData();
  dataFile.append("file", file);
 //接口调用把dataFile传给后端即可
},

这里在录制完成上传时遇到了一个问题，Android可以正常上传而ios会发现进不到接口会直接抛出err,这是因为H5的页面是https的而接口是http前缀的，ios安全性比安卓高不允许在https页面去访问http的接口，只需要接口也配置成https的就可以完美解决了。

新增需求：判断视频时长，超出限制拦截禁止上传

loadedmetadata 兼容性问题

1，使用loadedmetadata函数，当指定的音频/视频数据已加载时，会发生 loadedmetadata 事件，这种获取视频的时长在其他浏览器都可以获取到视频的时长，但是在ios微信小程序内打开内嵌的h5页面是不会触发的

2.由于ios对audio和video的一系列限制，包括提前load和自动播放等，所以只有当audio触发play事件，才可以监听到duration，我们只需要默认触发play事件，播放音频，注意的需要及时进行暂停。

代码：

videoChange(e) {
  let file = e.target.files[0];
  let url = URL.createObjectURL(file);
  let audioEle = new Audio(url);
  let dataFile = new FormData();
  dataFile.append("file", file);
  audioEle.muted = true
  audioEle.play().then(()=>audioEle.pause())
  audioEle.addEventListener("loadedmetadata", () => {
    this.duration = audioEle.duration;
    //下面就可以进行判断来调用接口了
  });
},

至此问题就得到解决了~