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

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>

横屏模式模式下,

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只能针对本身页面做适配!!!)