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

一：设置playsinline不全屏播放

 <video
      id="videoplay"
      src={[require("./../../assets/laterImg/westlake.mp4")]}
      playsInline={ true }           //react项目中警告，所以把true用{}包起来了
      webkit-playsinline="true"     //兼容ios
      x5-playsinline="true"        //兼容安卓
   />

二：设置 x5videoplayerfullscreen 全屏方式

<video id="videoplay" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>

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

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

三：设置 x5videoorientation 播放器横竖屏方向

横屏

<video x5-video-orientation="landscape"/>

竖屏

<video x5-video-orientation="portrait"/>

跟随手机自动旋转

<video x5-video-orientation="landscape|portrait"/>

注: 此属性只在声明了 x5videoplayertype="h5" 情况下生效

四：设置 WeixinJSBridgeReady 自动播放

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

index.html引入微信插件

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>

demo.js

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

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

实现自动播放全部兼容

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

<img src={[require("./../../assets/laterImg/westlake.gif")]} width="96%"alt=""/>

但是这个方法有很明显的缺点：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(<img src={require(`./../../assets/xihu/xihu_0000${i}.jpg`)} alt=""/>)  
        }else if(10<i & i < 100){
          modals.push(<img src={require(`./../../assets/xihu/xihu_000${i}.jpg`)} alt=""/>)  
        }else if(100<=i & i <149){
          modals.push(<img src={require(`./../../assets/xihu/xihu_00${i}.jpg`)} alt=""/>)  
        }
      }

      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 (
      <div id="pics" >
        测试一下
        <img src={require("./../../assets/xihu/xihu_00001.jpg")} alt="" id="pic" style={{width:"100%"}}/>
      </div>
    );
  }
}
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