# video+audio的一些设置

**Repository Path**: lzcq/video

## Basic Information

- **Project Name**: video+audio的一些设置
- **Description**: 微信H5video、audio/全屏/不全屏/自动播放等相关问题
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2018-08-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# video、audio全屏/自动播放等相关问题

#### 项目介绍
微信H5video、audio/全屏/不全屏/自动播放等相关问题，大部分来源于[腾讯H5同层播放器接入规范](http://https://x5.tencent.com/tbs/guide/video.html)

# Video

#### 启用Ｈ5同层播放器 x5-video-player-type

x5-video-player-type支持的值类型：h5

```
<video src="http://xxx.mp4" x5-video-player-type="h5"/>
```
注： 这个属性需要在播放前设置好，播放之后设置无效，下面的’x5-video-player-fullscreen’也是一样


#### 全屏方式 x5-video-player-fullscreen

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

```
window.onresize = function(){

  m_video.style.width = window.innerWidth + "px";

  m_video.style.height = window.innerHeight + "px";

}
```
ios端暂时无效，android端没有问题，且无需监听resize，添加上 x5-video-player-fullscreen 就可实现。

#### 横竖屏 x5-video-orientation
可选值： landscape 横屏, portraint竖屏

```
//横屏
<video id="m_video" src="xxx" x5-video-player-type=”h5” x5-video-orientation="landscape"/>

//竖屏
<video id="m_video" src="xxx" x5-video-player-type="h5" x5-video-orientation="portrait"/>

//跟随手机自动旋转
<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>
```
注: 此属性只在声明了x5-video-player-type=”h5”情况下生效

### 事件回调
#### 进入全屏 x5videoenterfullscreen

```
<video id="m_video" src="xxx" />
```

```
m_video.addEventListener("x5videoenterfullscreen", function(){

  alert("进入全屏");

})
```
#### 退出全屏 x5videoexitfullscreen

```
myVideo.addEventListener("x5videoexitfullscreen", function(){

  alert("退出全屏");

})
```
#### 视频显示位置
置顶

```
myVideo.style["object-position"]= "0px 0px"
```

底部

```
var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)
myVideo.style["object-position"]= "0px " + offsetY + "px"
```
### 内联播放
给vedio标签添加 `webkit-playsinline='true' playsinline='true'` 属性，安卓下添加 `x5-video-player-type="h5"` 会全屏播放，但一般上下都有黑边，所以想内联播放就不能添加此属性。

※内联播放的vedio标签默认层级为最高级，若视频上有弹框则会被覆盖。可以用canvas来解决。或在显示弹框的时候把vedio隐藏，关闭弹框再显示vedio。
```
<video src="" webkit-playsinline='true' playsinline='true' preload="auto" x5-playsinline='true' controls poster=""></video>
```

# Audio
兼容ios自动播放

```
document.addEventListener("WeixinJSBridgeReady", function () {  
    audioEle.play();
}, false);  
document.addEventListener('YixinJSBridgeReady', function() {  
    audioEle.play(); 
}, false); 
```