# 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
#### 启用H5同层播放器 x5-video-player-type
x5-video-player-type支持的值类型:h5
```
```
注: 这个属性需要在播放前设置好,播放之后设置无效,下面的’x5-video-player-fullscreen’也是一样
#### 全屏方式 x5-video-player-fullscreen
```
```
```
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竖屏
```
//横屏
//竖屏
//跟随手机自动旋转
```
注: 此属性只在声明了x5-video-player-type=”h5”情况下生效
### 事件回调
#### 进入全屏 x5videoenterfullscreen
```
```
```
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。
```
```
# Audio
兼容ios自动播放
```
document.addEventListener("WeixinJSBridgeReady", function () {
audioEle.play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
audioEle.play();
}, false);
```