移动端H5开发问题（html2canvas、video、audio）

此次读书日活动功能主要是：五个问题对应五个动画交互页面，答完5道题之后展示一段视频（随机从书架上抽出一本书的动画效果），随后进入结果页面。

在结果页需要做站内站外的分享交互，将结果页面利用html2canvas转成图片，再将图片分享到各个平台。

 

开发过程中遇到的问题如下：

***html2canvas转apng资源元素异常***

通过image标签使用的apng动画，当它播放完成之后，再使用html2canvas转image元素，此时得到的只是apng动图的第一帧静态图片而不是最后一帧，所以需要再播放完成之后将src替换成最后一帧图片的url再使用html2canvas转。

 

***html2canvas转image元素时失效***

对于image元素，需要将其资源url import进来之后在dom中赋值到image元素的src上，写在css里不行。

 

***html2canvas会使当前页面中autoplay的audio再次播放***

这是因为html2canvas会临时遍历创建一套当前页面中所有的dom元素，再将转换目标元素择出来。解决办法是：在调用html2canvas之前，将audio元素临时移除掉autoplay属性，执行完之后再加上autoplay属性。

document.getElementById("WorldBookDayMusic").removeAttribute('autoPlay')

　　

***在iOS移动端微信浏览器上，视频和音频无法播放，安卓端可以***

解法如下：

init = () => {
    if (this.refVideo) {
      this.refVideo.play()
      if (typeof WeixinJSBridge !== 'undefined') {
        WeixinJSBridge.invoke('getNetworkType', {}, e => {
          this.refVideo.play()
        })
      }
    }
  }

 

***在iOS手机上，H5页面中audio的音量无法通过volume来设置***

 

解法如上：将音频文件本身的音量设置大些，这样在audio中直接通过src使用就可。

 

*** 在安卓手机上，video视频会闪现下默认播放图标***

解法如下图：加上 poster="noposter"即可

 

 

***在iOS 13.4版本上，html2canvas无效（无报错无响应）***

解法：需要将html2canvas版本设置成 1.0.0-rc.4，即在package.json中 设置  "html2canvas": "1.0.0-rc.4"。但是这个版本在服务端渲染项目中会报 window is not defined错误，所以不能在页面顶部import，在使用的地方import。

utils.js文件

const importHtml2Canvas = () => import (/* webpackChunkName: "activityHtml2canvas" */ 'html2canvas')

const _ = ''

export {
  _ as default,
  importHtml2Canvas,
}

使用：

const html2canvas = await (await (importHtml2Canvas)()).default

 

***在APP内，进入活动结果页面，点击分享调用客户端分享协议后，再点击重新测试，再次进入结果页时会再次触发客户端分享协议***

解法：

在didMount中调用getInitIframe方法，如下，将首次iframe的src存下来：

getInitIframe = () => {
    const {isIOS} = this.props
    if (isIOS && document.getElementsByTagName('iframe')[0]) {
      this.setState({iframeSrc: document.getElementsByTagName('iframe')[0].src})
    }
  }

点击重新测试按钮时，执行

const {isIOS} = this.props
    if (isIOS && document.getElementsByTagName('iframe')[0]) {
      document.getElementsByTagName('iframe')[0].src = this.state.iframeSrc
    }