产品百科 ｜如何启用 H5 的同层播放

背景信息

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

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

同层播放属性

同层播放设置

• 不全屏同层播放通过设置 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();
});

「视频云技术」你最值得关注的音视频技术公众号，每周推送来自阿里云一线的实践技术文章，在这里与音视频领域一流工程师交流切磋。