一：设置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
