h5 页面元素全屏

xjd 6/4/2019 js

# 一、requestFullscreen()

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/nep.min.css">
  <script src="js/nep.min.js"></script>
  <script src="js/jquery-1.11.0.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
      overflow: hidden;
    }

    #video-panel {
      width: 100%;
    }

    .video-js {
      height: 100%;
      width: 100%;
    }

    .vjs-controls-disabled .vjs-control-bar,
    .vjs-error .vjs-control-bar,
    .vjs-using-native-controls .vjs-control-bar {
      display: flex !important;
    }
  </style>
</head>

<body>
  <div id="video-panel">
    <video id="my-video" class="video-js vjs-big-play-centered vjs-16-9"
      webkit-playsinline palysinline x5-playsinline x-webkit-airplay="allow"
      data-setup="{}">
      <source src="img/oceans.mp4" type="video/mp4"></source>
    </video>
  </div>
  <div class="other-panel">
    <button id="aaa">dddd</button>
  </div>
  <script>
    var _player = neplayer("my-video", {
      bigPlayButton: false,
      controls: true,
      controlBar: {
        volumeMenuButton: false,
        progressControl: false,
        remainingTimeDisplay: false,
        fullscreenToggle: false
      }
    }, function () {
      $("#my-video_html5_api").removeAttr("controls");
      $(".vjs-control-bar").append('<button class="vjs-control " id="full-screen">'
        +'<span>全屏</span></button>');
    })

    $("#aaa").click(function () {
      _player.play();
    })

    $("#video-panel").on("click", '#full-screen', function () {
      var isFullscreen = document.fullscreenEnabled ||window.fullScreen ||document.webkitIsFullScreen ||document.msFullscreenEnabled;
      if (isFullscreen) {
        exitFullscreen();
      } else {
        lanchFullscreen()
      }
    })
    document.addEventListener("webkitfullscreenchange", function () { fullscreenEnable(); })
    document.addEventListener('fullscreenchange', function () { fullscreenEnable(); })
    document.addEventListener('mozfullscreenchange', function () { fullscreenEnable(); })
    document.addEventListener('MSFullscreenChange', function () { fullscreenEnable(); })
    //全屏
    function lanchFullscreen() {
      var element = document.getElementById("video-panel")
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullScreen();
      }
    }
    //退出全屏
    function exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      }else if (document.msExitFullscreen) {
        document.msExiFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    }
    //判断是否全屏
    function fullscreenEnable() {
      var isFullscreen = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
      //注意：要在用户授权全屏后才能准确获取当前的状态
      var conW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      var conH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      if (isFullscreen) {
        console.log('全屏模式');
        $("#video-panel").css({
          "transform": "rotate(90deg)",
          "width": conH + "px",
          "height": conW + "px",
        });
      } else {
        console.log('非全屏模式');
        $("#video-panel").css({
          "transform": "rotate(0)",
          "width": conW + 'px',
          "height": "auto",
        });
      }
    }
  </script>
</body>

</html>

# 二、css3 旋转 90 度

//全屏
function fullScreen() {
  var conW =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth
  var conH =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight
  $('#room').hide()
  $('.fullVideo').css({
    transform:
      'rotate(90deg) translate(' +
      (conH - conW) / 2 +
      'px,' +
      (conH - conW) / 2 +
      'px)',
    width: conH + 'px',
    height: conW + 'px',
    'transform-origin': 'center center',
    '-webkit-transform-origin': 'center center',
    top: '0',
    left: '0',
    right: '0',
    bottom: '0',
    transition: 'all .5s ease-out'
  })
}

//半屏
function halfScreen() {
  var conW =
    window.innerWidth ||
    document.documentElement.clientWidth ||
    document.body.clientWidth
  var conH =
    window.innerHeight ||
    document.documentElement.clientHeight ||
    document.body.clientHeight
  $('#room').show()
  $('.fullVideo').css({
    transform: 'rotate(0)',
    width: conW + 'px',
    height: 'auto',
    'transform-origin': 'center center',
    '-webkit-transform-origin': 'center center',
    bottom: 'auto',
    transition: 'all .5s ease-out',
    top: '3rem'
  })
}
var isFull = false //是否全屏
$('.fullVideo').on('click', '.full-screen', function() {
  if (isFull) {
    halfScreen()
  } else {
    fullScreen()
  }
  isFull = !isFull
})

个人主页

Choose mode

h5 页面元素全屏

h5 页面元素全屏

# 一、requestFullscreen()

# 二、css3 旋转 90 度