HTML5 video - lishuwenMZL/- GitHub Wiki

当我们使用video标签的时候，有时候因为更多的需要，我们要自己自定义控制栏，而进入和退出全屏也是其中的一部分不同的浏览器有不同的实现方法

关于video标签

poster="loadbg.jpg"　视频封面
preload="auto"
x-webkit-airplay="allow"
x5-video-player-type="h5"　启用H5播放器,是wechat安卓版特性
x5-video-player-fullscreen="true"　全屏设置，设置为 true 是防止横屏
x5-video-orientation="portraint"　播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏
webkit-playsinline="true"　这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放
playsinline="true"　IOS微信浏览器支持小窗内播放

可是经测试 x5-video-orientation="landscape" 在ios上并不起作用，依然无法横屏播放，Android上正常

// Webkit

element.webkitRequestFullScreen();//进入全屏
document.webkitCancelFullScreen();//退出全屏

// Firefox

element.mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C

element.requestFullscreen();
document.exitFullscreen();

一般兼容性写法，我们先使用w3c标准的方法，如果不可以在兼容不同浏览器。

//进入全屏

function FullScreen() {
```
var ele = document.documentElement;
```
```
if (ele .requestFullscreen) {
```
```
    ele .requestFullscreen();
```

} else if (ele .mozRequestFullScreen) {

```
    ele .mozRequestFullScreen();
```

} else if (ele .webkitRequestFullScreen) {

```
    ele .webkitRequestFullScreen();
```
```
}
```
}

//退出全屏

function exitFullscreen() {
```
var de = document;
```
```
if (de.exitFullscreen) {
```
```
    de.exitFullscreen();
```
```
} else if (de.mozCancelFullScreen) {
```
```
    de.mozCancelFullScreen();
```

} else if (de.webkitCancelFullScreen) {

```
    de.webkitCancelFullScreen();
```
```
}
```
}

* 接下来是用例

$(ele).on('click',function(){
```
requestFullScreen();
```
// exitFullscreen();
});

第二部：设置 x5videoplayerfullscreen 全屏方式

视频播放时将会进入到全屏模式注：声明此属性，需要页面自己重新适配新的视口大小变化。可以通过监听 resize 事件来实现

需要监听窗口大小变化(resize)实现全屏

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

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

横屏

竖屏

跟随手机自动旋转

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

第三步：设置playsinline不全屏播放

第四部：设置 WeixinJSBridgeReady 自动播放

HTML

document.addEventListener(“WeixinJSBridgeReady”, function() {
document.getElementById(‘video’).play();
}, false);

//判断手机横竖屏状态：

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
if (window.orientation === 180 || window.orientation === 0){
alert('竖屏状态！');
}
if (window.orientation === 90 || window.orientation === -90 ){
alert('横屏状态！');
}
}, false); //移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。