H5页面video在app内实现poster效果

H5页面Video组件 在APP内  时候没有 加载的时候 没有封面就是poster，所以要想办法解决，

 

video标签

  移动端的页面里如果有video标签，根据官方文档上写着，没有加poster的话，就自动采用视频第一帧作为poster。

  在ios上大部分浏览器都不会自动加载视频第一帧作为poster，ios上表现为一个大播放按钮在中间，然后播放器其他区域全是空白，安卓机上则表现良好

• 查阅资料，得出解决方案是，用canvas加载video第一帧渲染一个base64的image作为poster，尝试了后失败，canvas报错因为资源跨域，被污染无法转image，即便video设置了跨域也不行，资源的获取上也是设置了跨域的
• 换了种思路，不使用第一帧，使用第0.1秒作为封面，只要在src后面加上#t=0.1即可自动加载到第0.1秒，实现了poster效果，比如<video src="xxxxxx.mp4#t=0.1" />，试了一下大部分ios上的移动浏览器都支持，支持极为良好。（这个方法推荐）
• 还有就是用 那种截屏的方式，视频的链接后面加上一些？参数（是腾讯的提供的，当然是要付费的， ）

 

1. 然后发现微信自带的浏览器不支持自动播放(就是手机上直接从微信点开一个链接打开的浏览器)，
查阅资料后得知，需要加一个监听，实现自动播放

document.addEventListener("WeixinJSBridgeReady", function (){     
  document.getElementById('video').play() 
}, false)

但是我要的是实现poster效果，不是自动播放，所以要在play后给他暂停

 document.addEventListener("WeixinJSBridgeReady", function (){     
  document.getElementById('video').play();     
  document.getElementById('video').pause(); 
}, false)

2.于是在一对父子组件里分别都监听了这个事件，但是子组件一直触发不了，父组件则能触发，

   因为子组件是通过接口返回了数据才去渲染的，

而父组件页面一加载就有，WeixinJSBridgeReady只会触发一次，子组件里面设置监听的时候，已经迟了，不会再触发了

3.子组件需要这样判断去触发，在didmount的时候去判断，然后按照下面的去调用，在回调函数里去播放和暂停，实现poster效果

componentDidMount = () => {        
  if (window.WeixinJSBridge) {            
    window.WeixinJSBridge.invoke('getNetworkType', {}, e => {            
    document.querySelector('video').play();                 
    document.querySelector('video').pause();             
    }, false);        
  }   
}

4.对于其他端，需要给src后面加上#t=0.1，并且设置默认内联播放，不脱离文档流，

因为很多安卓浏览器都会劫持video标签，在播放的时候自动调用原生播放器，提升性能，对于交互有严格要求的产品来说，这个是要干掉的。

所以需要加一些属性，由于是在字符串里面的标签里加，如果用正则匹配替换，会非常不方便，所以用下面的方法

setVideoHTML = () => {         
  const {innerHTML} = this.props;        
  const div = document.createElement('div');        
  div.innerHTML = innerHTML;         
  div.querySelectorAll('video').forEach(video => {             
  video.src += '#t=0.1';             
  video.setAttribute('playsinline', 'true');             
  video.setAttribute('autoplay', 'false');             
  video.setAttribute('preload', 'auto');            
  video.setAttribute('webkit-playsInline', 'true');             
  video.setAttribute('x-webkit-airplay', 'allow');           
  video.setAttribute('x5-video-player-type', 'h5');            
  video.setAttribute('x5-video-player-fullscreen', 'true');           
  video.setAttribute('x5-video-orientation', 'portraint');    
});         
return div.innerHTML;    
}

最后需要调整

这里好像只能用setAttribute方法，直接加没生效，这样子调用后，得到的还是一串字符串，但是里面对应的内容都被替换修改了，就可以正常用了

<div dangerouslySetInnerHTML={{__html: this.setVideoHTML()}}/>