如何使用播放器SDK启用H5的同层播放_视频点播-阿里云帮助中心

您可以阅读本文，了解在H5的同层播放功能。

背景信息

阿里云播放器2.0.1及以上，支持在Android微信小程序上支持H5同层播放功能，此功能只对Android腾讯的X5浏览器起作用。

如果微信没有启用同层播放，在Android微信上播放视频时，会自动弹出全屏播放，覆盖Dom元素。

同层播放属性

名称	类型	说明
x5_type	String	启用同层播放，设置值为h5。
x5_fullscreen	Boolean	声明视频播放时是否进入到TBS的全屏模式，支持的值为true。
x5_video_position	String	声明视频播放时在界面上的位置，默认为center。取值： top：顶部。 center：中央。
x5_orientation	String	声明TBS播放器支持的方向，取值： landscape：横屏。 portrait：竖屏。

同层播放设置

不全屏同层播放
通过设置x5_type属性为h5，将playsinline设置为false，启用同层播放。
通过x5_video_position定义视频的位置，如果在顶部可以设置为top，居中可以设置center，默认为center。
Demo，请下载H5 Demo。
全屏同层播放
通过设置x5_type属性为h5，将playsinline设置为false，启用同层播放，设置x5_fullscreen为true，启用全屏，全屏播放器不需要设置x5_video_position属性。
全屏播放视频默认是平铺的，如果想不平铺可以设置object-fit的样式为contain或其它。
```
video {
    object-fit: contain !important;
    }            
```
Demo，请下载H5 Live Demo。

同层播放的建议

在使用同层播放器时，为您提供的一些建议，如下所示：

监听resize事件实现自适应视口大小变化，视频播放时会调整视口大小。
在视频播放期间的交互、弹框和字幕要在视频区域中，不要在视频区域外。
对于直播类全屏视频，最好不要在最顶部放交互性元素。
对于需要全屏交互的，可以将video区域设置为视口大小。

更多设置

进入和退出同层播放时布局处理
在进入和退出同层播放的事件里，可以添加一些调整布局的逻辑，时常在进入同层播放时，布局需要做一下调整。例如全屏，元素的位置等。
进入事件：x5requestFullScreen。
退出事件：x5cancelFullScreen。
更多的自定义
如果x_video_position属性的top和center不能满足要求，可以通过自定义object-fit和object-position属性，进行更灵活的设置视频的显示位置。
object-fit属性
object-fit：CSS属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
取值：
- object-fit：fill。
- object-fit：contain
- object-fit：cover
- object-fit：none
- object-fit：scale-down
CSS代码如下所示：
```
 video {
    object-fit: contain !important;
    }            
```

object-position属性

object-position：CSS属性控制替换内容位置，和background-position属性很类似。

CSS代码如下所示：

img {
   width: 300px;
   height: 250px;
   border: 1px solid black;
   background-color: silver;
   margin-right: 1em;
   object-fit: none;
}

#object-position-1 {
  object-position: 10px;
}

#object-position-2 {
  object-position: 100% 10%;
}

调整播放器容器的高度

由于设置了视频的位置，会引起controlbar显示不是在视频的最下面，可以通过订阅resize和requestFullScreen事件调整视频容器的高度。

var setLayout = function()
{    
    //设置播放器容器的高度
    var height ; //根据实际情况设置高度
    player.el().style.height = height;
}

window.onresize = function(){
    setLayout();
}

player.on("requestFullScreen", function(){
    setLayout();
});