如何使用VideoJS使元素在全屏模式下可见

How Do I Make An Element Visible in Fullscreen Mode With VideoJS

本文关键字：模式何使用 VideoJS 元素更新时间：2023-09-26

我正在使用VideoJS作为我的HTML5视频播放器，我正在尝试为其他自定义控件添加侧边栏。我的自定义栏在正常视图模式下可见并运行，但在全屏视图模式下消失。

这是一些代码。。。

<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
  <meta charset="utf-8" />
  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />
  <title>Video | Player</title>
  <!-- VIDEOJS -->
  <link href="video-js.css" rel="stylesheet" type="text/css">
  <script src="video.js"></script>
  <script>
    videojs.options.flash.swf = "video-js.swf";
  </script>
  <!-- VIDEOJS ERRORS -->
  <script src='videojs.errors.js'></script>
  <link href='videojs.errors.css' rel='stylesheet'>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <!-- STYLES -->
  <style type="text/css" media="screen">
    * { padding:0; margin:0; }
    body { background-color: #000; }
#player{
  overflow: hidden;
  position: relative;
}
#slider{
    /*display: none; /* Start hidden */
    /*height: 100%;*/
    position: absolute;
    /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
    top: 0;
    /* 100% height of player div */
    bottom: 0em;
    right: 0;
    /* Controls are absolutely position, so no padding necessary */
    padding: 0;
    margin: 0;
    /* Width includes any margin you want above or below control items */
    width: 2.0em;
    background-color: rgb(0, 0, 0);
    /* Slight blue so it can be seen more easily on black. */
    /*background-color: rgba(7, 40, 50, 0.7); */
    font-style: normal;
    font-weight: normal;
    font-family: Arial, sans-serif;
    overflow:hidden;
    z-index:1101;
}
#slider #arrow{
    width:2em;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1103;
    background-color: rgb(233, 191, 44);
}
#slider #arrow img{
    padding:0;
    margin:0 0 0 3px;
    position:absolute;
    top:45%;
}
#slider #arrow img:hover{
    opacity:.75;
    filter:alpha(opacity=75); /* For IE8 and earlier */
}
#slider #main{
    width: -moz-calc(100% - 2em);
    width: -webkit-calc(100% - 2em);
    width: -o-calc(100% - 2em);
    width: calc(100% - 2em);
    height: -moz-calc(100%);
    height: -webkit-calc(100%);
    height: -o-calc(100%);
    height: calc(100%);
    position:absolute;
    top:0;
    left:2em;
    padding:0;
    z-index:1102;
}
#slider #main #mainContent{
    width: 100%;
    height: -moz-calc(100% - 7%);
    height: -webkit-calc(100% - 7%);
    height: -o-calc(100% - 7%);
    height: calc(100% - 7%);
}
#slider #main #mainFooter{
    width: 100%;
    height: 7%;
}
.video-js { margin:0 auto; }
.vjs-fullscreen { padding-top: 0px }
.vjs-default-skin .vjs-big-play-button { top: 50%; left: 50%; margin: -4em auto auto -6em; }
.vjs-default-skin .vjs-control-bar { right:3.25em; }
  </style>
  <script>
$(document).ready(function(){
  var w=window.innerWidth;
  var h=window.innerHeight;
  var myPlayer = videojs("example_video_1");
  if(w/16 > h/9) {
    var r = (w - (16*(h/9)) ) / 2;
    myPlayer.dimensions((16*(h/9)),h);
    document.getElementById('slider').style.right = r + 'px';
  } else {
    var r = (h - (9*(w/16)) ) / 2;
    myPlayer.dimensions(w, (w/16) * 9);
    document.getElementById('player').style.marginTop = r + 'px';
  }
});
  </script>
</head>
<body>
  <div id="player">
    <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="http://www.videojs.com/img/poster.jpg" data-setup='{"example_option":true}'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm' />
  <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg' /> 
</video>
<div id="slider">
  <div id="arrow">
    <img id="arrowImg" src="http://placehold.it/18x32" />
  </div>
  <div id="main" style="">
    <div id="mainContent" style="">
      <div style="width:47%; height:44.5%; padding: 2% 1% 1% 2%; float:left;">
        <div style="width:100%; height:100%;">
          <a href="#">&nbsp;</a>
        </div>
      </div>
      <div style="width:47%; height:44.5%; padding: 2% 2% 1% 1%; float:left;">
        <div style="width:100%; height:100%;">
          <a href="#">&nbsp;</a>
        </div>
      </div>
      <div style="width:47%; height:44.5%; padding: 1% 1% 2% 2%; float:left;">
        <div style="width:100%; height:100%;">
          <a href="#">&nbsp;</a>
        </div>
      </div>
      <div style="width:47%; height:44.5%; padding: 1% 2% 2% 1%; float:left;">
        <div style="width:100%; height:100%;">
          <a href="#">&nbsp;</a>
        </div>
      </div>
    </div>
    <div id="mainFooter" style="background:#e9bf2c;">
    </div>
  </div>
</div>
  </div>
      <!-- CUSTOM -->
      <script type="text/javascript">
    // Once the video is ready
    videojs("example_video_1").ready(function(){
  var myPlayer = this;     // Store the video object
  var aspectRatio = 9/16;  // Make up an aspect ratio
  //myPlayer.play();
  this.errors();
});
$(document).ready(function(){
  var h=window.innerHeight;
  var w=window.innerWidth;
  var r = 0;
  if(h/9 > w/16) {
    r = w;
  } else {
    r = (16*(h/9));
  }
  var nr = r + 'px';
  var toggle = true;
  $("#arrow").click(function(){
    var div=$("#slider");
    if(toggle) {
      div.animate({width:nr},"slow");
    } else {
      div.animate({width:'2em'},"slow");
    }
    toggle = !toggle;
  });
});

使用HTML5全屏API，将视频放在侧边栏中，而不是使视频成为全屏，并使容器成为全屏，如中所述http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API.

    myPlayer = videojs('example_video_1');
    myPlayer.one("click",function () {
        this.requestFullscreen();   
    });