【H5】video兼容性问题以及解决对策

一：设置playsinline不全屏播放

二：设置 x5­video­player­fullscreen 全屏方式

注意：需要重新监听resize事件监听窗口大小变化

window.onresize = function(){
videoplay.style.width = window.innerWidth + "px";
videoplay.style.height = window.innerHeight + "px";
}

三：设置 x5­video­orientation 播放器横竖屏方向

横屏

竖屏

跟随手机自动旋转

注: 此属性只在声明了 x5­video­player­type="h5" 情况下生效

四：设置 WeixinJSBridgeReady 自动播放

注意：用这种方法安卓版本的微信仍然不能实现自动播放，但是ios版本微信可以

index.html引入微信插件

demo.js

//如果是react项目需要将这一大堆放在componentDIDMount中，vue项目放在mounted中，
//因为在这个生命周期才能够形成真正的dom
let videoplay = document.getElementById("videoplay");
if(videoplay){  
 document.addEventListener("WeixinJSBridgeReady",function() { 
          videoplay.play(); 
        }, false);
}

那么问题来了：我刚才说这个方法不兼容安卓版本的微信，但是如果需求不能改变的情况下怎么做呢，比较简单的做法有两种，这两种方法我都尝试了，下面分享出来：

实现自动播放全部兼容

方法一：将视频通过软件或者找公司的UI做成gif格式的，不用浪费太多时间，那么加载出来就是一张动图代码如下：

但是这个方法有很明显的缺点：1.做成GIF格式的动图所占大小偏大，2.清晰度上会受到一定的影响
如果公司在这两点有要求比较苛刻的话可以采取下一种方式

方法二：将原视频切成一帧一帧的图片，找公司UI，通过一个软件弄出来，很快的，这个时候自己一定要寻求公司其他UI同事的帮助，你需要做的是多想办法实现最终效果

具体实现：循环图片，设置定时器，在一个标签中变化图片的路径

import React, { Component } from "react";
class IndexT extends Component {
  state={
    pictures:[]
  }
  componentDidMount() {
    let pics = document.getElementById("pics");
    if(pics){
     let modals=[];
      for (let i = 0; i < 149; i++) {
        if(i<10){
          modals.push()  
        }else if(10)  
        }else if(100<=i & i <149){
          modals.push()  
        }
      }

      let pic = document.getElementById("pic");
      let time = 0;
      function cycle(){
       time++;
       pic.src=modals[time].props.src
       if(time === 147){
        time = 0 
       }
       setTimeout(cycle,66.7);
      }
      cycle()
    }
  }

  render() {
    return (
      

        测试一下
        
      
    );
  }
}
export default IndexT;

完整项目代码可以拉取我传在gitHub上的代码https://github.com/topvae/h5video

另外还有一种自己没有尝试的方法，用canvas，由于自己没有做demo,在此不做过多解释，官网如下：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas