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(){

//退出全屏模式

})