一：設(shè)置playsinline不全屏播放
<video
id="videoplay"
src={[require("./../../assets/laterImg/westlake.mp4")]}
playsInline={ true } //react項目中警告膜楷，所以把true用{}包起來了
webkit-playsinline="true" //兼容ios
x5-playsinline="true" //兼容安卓
/>
二：設(shè)置 x5-video-player-fullscreen 全屏方式
<video id="videoplay" src="xxx" x5-video-player-type="h5" x5-video-player-fullscreen="true"/>
注意：需要重新監(jiān)聽resize事件監(jiān)聽窗口大小變化
window.onresize = function(){
videoplay.style.width = window.innerWidth + "px";
videoplay.style.height = window.innerHeight + "px";
}
三：設(shè)置 x5-video-orientation 播放器橫豎屏方向
橫屏
<video x5-video-orientation="landscape"/>
豎屏
<video x5-video-orientation="portrait"/>
跟隨手機自動旋轉(zhuǎn)
<video x5-video-orientation="landscape|portrait"/>
注: 此屬性只在聲明了 x5-video-player-type="h5" 情況下生效
四：設(shè)置 WeixinJSBridgeReady 自動播放
注意：用這種方法安卓版本的微信仍然不能實現(xiàn)自動播放，但是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);
}
那么問題來了：我剛才說這個方法不兼容安卓版本的微信敢靡，但是如果需求不能改變的情況下怎么做呢桃移，比較簡單的做法有兩種见转，這兩種方法我都嘗試了誊稚，下面分享出來：
實現(xiàn)自動播放全部兼容
方法一：將視頻通過軟件或者找公司的UI做成gif格式的管削，不用浪費太多時間倒脓，那么加載出來就是一張動圖代碼如下：
<img src={[require("./../../assets/laterImg/westlake.gif")]} width="96%"alt=""/>
但是這個方法有很明顯的缺點：1.做成GIF格式的動圖所占大小偏大，2.清晰度上會受到一定的影響
如果公司在這兩點有要求比較苛刻的話可以采取下一種方式
方法二：將原視頻切成一幀一幀的圖片含思，找公司UI崎弃，通過一個軟件弄出來，很快的含潘，這個時候自己一定要尋求公司其他UI同事的幫助饲做，你需要做的是多想辦法實現(xiàn)最終效果
具體實現(xiàn)：循環(huán)圖片，設(shè)置定時器遏弱，在一個標(biāo)簽中變化圖片的路徑
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,在此不做過多解釋漱逸，官網(wǎng)如下：https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Manipulating_video_using_canvas
