乐趣区

关于程序员:视频直播点播H5播放器SkeyeWebPlayer适配排除移动端常见移动端Web页面问题及解决方案

jiezi
免费视频直播、点播 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 只能针对本身页面做适配！！！）
退出移动版