全部产品
云市场

如何启用H5的同层播放

更新时间:2019-04-16 20:56:21

同层播放介绍

Aliplayer2.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:横屏)
portraint:竖屏
landscape
portrait:跟随手机自动旋转

不全屏同层播放

通过设置x5_type属性为’h5’, 启用同层播放

通过x5_video_position定义视频的位置, 如果在顶部可以设置为’top’,居中可以设置’center’,默认为’center’

Demo地址h5demo

同层播放

全屏同层播放

通过设置x5_type属性为’h5’, 启用同层播放, 设置x5_fullscreen为true,启用全屏, 全屏播放器就没必要设置”x5_video_position”属性了。

全屏播放视频默认是平铺的,如果想不平铺可以设置object-fit的样式为contain或其它

  1. video {
  2. object-fit: contain !important;
  3. }

Demo地址h5livedemo

同层播放

进入和退出同层播放时布局处理

在进入和退出同层播放的事件里,可以添加一些调整布局的逻辑,时常在进入同层播放时,布局需要做一下调整,比如全屏,元素的位置等。

进入事件: x5requestFullScreen

退出事件: x5cancelFullScreen

同层播放的建议

使用同层播放器的一些建议

  • 监听resize 事件实现自适应视口大小变化,视频播放时会调整视口大小

  • 在视频播放期间的交互,弹框,字幕在视频视频区域中,不要在视频区域外

  • 对于直播类全屏视频,最好不要在最顶部放交互性元素

  • 对于需要全屏交互的,可以将video区域设置为视口大小

更多的自定义

如果”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代码
  1. video {
  2. object-fit: contain !important;
  3. }

object-position属性

该object-position CSS属性控制替换内容位置,和background-position属性很类似

比如:

css代码

  1. img {
  2. width: 300px;
  3. height: 250px;
  4. border: 1px solid black;
  5. background-color: silver;
  6. margin-right: 1em;
  7. object-fit: none;
  8. }
  9. #object-position-1 {
  10. object-position: 10px;
  11. }
  12. #object-position-2 {
  13. object-position: 100% 10%;
  14. }

效果

效果

调整播放器容器的高度

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

  1. var setLayout = function()
  2. {
  3. //设置播放器容器的高度
  4. var height ; //根据实际情况设置高度
  5. player.el().style.height = height;
  6. }
  7. window.onresize = function(){
  8. setLayout();
  9. }
  10. player.on("requestFullScreen", function(){
  11. setLayout();
  12. });