video 在微信中,安卓全屏和ios上如何内联播放?H5同层播放器相关接入规范

今天在做一个分享页面的时候需要播放视屏用了video,然后各种坑开始了:

  <video src="http://xxx.mp4 " id="myVideo" poster=“XXX”  controls></video>

安卓微信 内:播放全屏并且定位在视屏上的一些东西也不见了?于是接入了同层

  <video src="http://xxx.mp4 " id="myVideo" poster=“XXX” controls x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>

  注:  x5-video-player-type、x5-video-player-fullscreen属性需要在播放前设置好,播放之后设置无效

  此时视屏上的一些东西看见了,但是$(window).width();$(window).height()设置后不能铺满整平,同层播放的时候呢出现上下黑边,

  折腾了一番用了screen.width ; screen.height

  此时进入同层的时候能够全屏播放了,但是呢页面刚进入未播放时候出现了滚动条,而我想要的就是占满手机屏幕就行了。反复测试了下在安卓内:

    $(window).height() : 获取的高度是内容区域不加导航区域,而 screen.height 是整个手机区域

  还有安卓进入同层上面有个返回按钮,点击后视屏停止播放难看,于是改变了下形式不要默认播放按钮,不要默认poster加封面;自己写了个播放按钮

    <video src="http://xxx.mp4 " id="myVideo" x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>

  通过监听处理:

    myVideo.addEventListener('play',function(){})

    myVideo.addEventListener('pause',function(){})

  此时坑已经差不多了,但是 ios 内坑继续了

    ios内联播放需要加上:<video src="http://xxx.mp4 " id="myVideo" webkit-playsinline="true" x-webkit-airplay="true"  playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>

  兼容各种全屏状态   

  var ua = navigator.userAgent.toLowerCase();
  if (/iphone|ipad|ipod/.test(ua)) {
    $("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
  }else if (/android/.test(ua)) {
    if (ua.match(/MicroMessenger/i) == "micromessenger") {

      //微信  解决同层时候上下黑边

      test_video.style.width = screen.width + "px";
      test_video.style.height = screen.height + "px";
    }else{

      //QQ微博等
      $("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
    }
  }else{
    $("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
  }

  还有通过object-position 设置显示位置、视屏是否铺满容器

    myVideo.style["object-position"]= "0px 0px"  //顶部

    var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)

    myVideo.style["object-position"]= "0px " + offsetY + "px"  //底部

    myVideo.style["object-fit"]= "fill"  //视屏铺满容器

  

  通过上面,通过特定布局在同层内还是可以实现假象的内联播放的,上面视屏,下面区域加上滚动条来处理

上一篇:Kalman卡尔曼滤波


下一篇:python的Web框架:Django路由系统以及模板导入