这是我参与8月更文挑战的第8天,活动详情查看:8月更文挑战”
基础的video播放器
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
H5同层播放器
通过video属性“x5-video-player-type”声明启用同层H5播放器
同层页面内播放是标准的视频播放形态,在video标签中添加x5-video-player-type:h5-page属性来控制网页内部同层播放,可以在视频上方显示html元素。
playsinline="true" webkit-playsinline="true" x5-video-player-type="h5-page" x5-video-player-fullscreen="true"
x5-video-player-fullscreen全屏方式
视频播放时将会进入到全屏模式
如果不申明此属性,页面得到视口区域为原始视口大小(视频未播放前),比如在微信里,会有一个常驻的标题栏,如果不声明此属性,这个标题栏高度不会给页面,播放时会平均分为两块(上下黑块)
注:声明此属性,需要页面自己重新适配新的视口大小变化。可以通过监听resize 事件来实现
注: :1. 为了让视频真正铺满全屏,可以适当让video的显示区域大于视口区域,这样在显示时在视口外的部截掉后,不会出四周黑边的情况
x5-video-orientation 控制横竖屏
功能:声明播放器支持的方向
可选值:landscape 横屏, portraint竖屏
横屏状态
<video ... x5-video-player-type=”h5” x5-video-orientation="landscape"/>
竖屏状态
<video ... x5-video-player-type="h5" x5-video-orientation="portrait"/>
跟随手机自动旋转
<video x5-video-player-type="h5" x5-video-orientation="landscape|portrait"/>
注: 此属性只在声明了x5-video-player-type=”h5”情况下生效
事件回调
x5videoenterfullscreen进入全屏通知
支持版本: TBS中从>=036900开始支持,QB中是>=7.2开始支持
x5videoenterfullscreen: 表示播放器进入全屏状态
示例:
myVideo.addEventListener("x5videoenterfullscreen", function(){ alert("player enterfullscreen");})
x5videoexitfullscreen退出全屏通知
x5videoexitfullscreen: 表示播放器退出了全屏状态
使用方法与x5videoenterfullscreen类似