免费视频直播、点播H5播放器SkeyeWebPlayer适配排除，移动端，常见移动端Web页面问题及解决方案
SkeyeVSS其独创的ws-rtsp流媒体直播技术，兼容传统安防流媒体的同时，不需要安装浏览器插件，解决互联网接入安防监控延迟高、起播慢等问题；支持全平台终端H5直播点播（PC、Web、Android、iOS）。
一般情况下SkeyeWebPlayer播放器的宽度是自适应，高度css 或者 new WebMediaPlayer()中的height参数来设置，常用的56.25 （56.25% 等于 16:9 ）

免费视频直播、点播H5，常见移动端Web页面问题及解决方案_移动端

1、移动端web禁止用户伸缩网
页
我们可以使用viewport禁止放大和缩小，通常把user-scalable设置为0来禁止用户对网页视图的伸缩行为，完整的viewport信息：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
2、SkeyeWebPlayer 播放器在移动端使用
SkeyeWebPlayer 播放器默认情况下会根据屏幕宽度自动进行自适应，默认宽度等于100%，在外部盒子没有设置宽度的情况下，播放器的宽度与屏幕相等，在初始化播放器 height：0 或者不设置时，可以用css来设置hegiht。
new WebMediaPlayer(
    this.url,
    `skeyePlayer`,
    this.callbackFunc,
    {
      cbUserPtr: this,
      decodeType: 'auto',
      openAudio: 0,
      BigPlay: false,
      // Height: 0  // 56.25
    })

<style>
    .player{
        height:100%; /*为100%时根据外层div的高度来显示 （也可设置排px）*/
    }
</style>
横屏模式模式下，

免费视频直播、点播H5，常见移动端Web页面问题及解决方案_移动端_02

###### 横屏模式模式下，

免费视频直播、点播H5，常见移动端Web页面问题及解决方案_css_03


#### 3、SkeyeWebPlayer 播放器在移动端强制横屏


###### 通过css媒体查询判断横竖屏，并分别指定样式：

    <template>

      <div class="mobile">

        <div class="wrap">

          <div class="skeye-player" id="skeyePlayer"></div>

        </div>

      </div>

    </template>


    <style>

        .mobile {

            position: fixed;

            width: 100%;

            height: 100%;

            padding: 0;

            margin: 0;

            overflow: hidden;

        }


        .skeye-player {

            height: 100%;

            width: 100%;

        }

        @media screen and (orientation: portrait) {


            /*竖屏  CSS*/

            .wrap {

              position: absolute;

              width: 100vh;

              height: 100vw;

              top: 0;

              left: 100vw;

              -webkit-transform: rotate(90deg);

              -moz-transform: rotate(90deg);

              -ms-transform: rotate(90deg);

              transform: rotate(90deg);

              transform-origin: 0% 0%;

            }

        }


        @media screen and (orientation: landscape) {


            /*横CSS*/

            .wrap {

              position: absolute;

              top: 0;

              left: 0;

              width: 100vw;

              height: 100vh;

            }

        }

    </style>


强制横屏如图：（强制通过页面 禁止app或手机的横竖屏的切换是不现实的，H5只能针对自身页面做适配！！！）

免费视频直播、点播H5，常见移动端Web页面问题及解决方案_竖屏_04