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 |
通过设置x5_type属性为'h5', 启用同层播放
通过x5_video_position定义视频的位置, 如果在顶部可以设置为'top',居中可以设置'center',默认为'center'
Demo地址h5demo
通过设置x5_type属性为'h5', 启用同层播放, 设置x5_fullscreen为true,启用全屏, 全屏播放器就没必要设置"x5_video_position"属性了。
全屏播放视频默认是平铺的,如果想不平铺可以设置object-fit的样式为contain或其它
video {
object-fit: contain !important;
}
Demo地址h5livedemo
使用同层播放器的一些建议
监听resize 事件实现自适应视口大小变化,视频播放时会调整视口大小
在视频播放期间的交互,弹框,字幕在视频视频区域中,不要在视频区域外
对于直播类全屏视频,最好不要在最顶部放交互性元素
对于需要全屏交互的,可以将video区域设置为视口大小
如果"x_video_position"的两个值top和center不能满足要求,可以通过自定义object-fit和object-position属性,进行更灵活的设置视频的显示位置。
该object-fit CSS属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
video {
object-fit: contain !important;
}
该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();
});