html5 video移动开发一

业务场景:微信公众号使用,通过video,取流实时浏览视频监控画面,能支持云台等一些操作,在手机上能全屏浏览并操作


视频显示位置css样式
object-fit: contain;//视频画面显示为原始比例,并且宽或高有一方铺满
object-position: left;//视频显示位置

//不显示video默认控制条controls,浏览器不同支持去掉controls的方法也不同
第一种,移动端设置css样式
video::-webkit-media-controls {
    display:none !important;
}

第二种,移除video标签controls属性 

第三种,js设置video controls为false
var video=document.getElementById("myPlayer");
video.controls=false;
video早先在android或ios浏览器中,都处于页面最顶层,没有办法被遮盖,一触发开始播放按钮,就会进入全屏,现在在ios中,通过给video添加属性playsInline webkit-playsinline,可以让元素内联播放:
<video id="myPlayer" poster=""  playsInline webkit-playsinline autoplay></video>

在android 微信中,要在video上面添加覆盖物,需要用到X5渲染引擎提供的同层播放器,这个引擎是腾讯基于webkit开发的,添加以下属性,可以达到的效果是,调用开始播放按钮,进入全屏,此时全屏状态自定义操作按钮什么的可以显示在video上:

x5-video-player-type='h5' //启用h5同层播放器
x5-video-player-fullscreen='true'//全屏方式,对元素的高度有影响,不声明此属性,微信浏览器的标题栏的高度不会给页面
x5-video-orientation='landscape'//视频播放时是横屏显示还是竖屏显示,属性值有三个,landscape横屏显示,portrait竖屏显示,landscape|portrait跟随手机自动横竖屏

由于项目同时考虑到video在ios 和android 微信中的表现的不同,页面所有显示的东西也不一样,所以要对是否进入全屏做事件监听

video.addEventListener("x5videoenterfullscreen", function(){

//进入全屏模式

})

video.addEventListener("x5videoexitfullscreen", function(){

//进入全屏模式

})

猜你喜欢

转载自blog.csdn.net/m0_37697423/article/details/84770246