Javascript 如何使用VideoJS使元素在全屏模式下可见_Javascript_Html_Html5 Video_Video.js

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

javascript html

Javascript 如何使用VideoJS使元素在全屏模式下可见,javascript,html,html5-video,video.js,Javascript,Html,Html5 Video,Video.js,我正在使用VideoJS作为我的HTML5视频播放器，并且我正在尝试添加一个侧边栏，用于其他自定义控件。我的自定义栏可见，在正常视图模式下工作，但在全屏视图模式下消失这里有一些代码 <!DOCTYPE html>  <html class="no-j

我正在使用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;
  });

});


视频播放器
videojs.options.flash.swf=“video js.swf”；
*{填充：0；边距：0；}
正文{背景色：#000；}
#玩家{
溢出：隐藏；
位置：相对位置；
}
#滑块{
/*显示：无；/*开始隐藏*/
/*身高：100%*/
位置：绝对位置；
/*与方框/视频底部的距离。保持0。使用“高度”添加更多底部边距*/
排名：0；
/*100%球员跳水高度*/
底部：0em；
右：0；
/*控件是绝对位置，因此无需填充*/
填充：0；
保证金：0；
/*宽度包括控制项上方或下方所需的任何边距*/
宽度：2.0em；
背景色：rgb（0,0,0）；
/*浅蓝色，因此在黑色上更容易看到*/
/*背景色：rgba（7,40,50,0.7）*/
字体风格：普通；
字体大小：正常；
字体系列：Arial，无衬线；
溢出：隐藏；
z指数：1101；
}
#滑块#箭头{
宽度：2米；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
z指数：1103；
背景色：rgb（23319144）；
}
#滑块#箭头img{
填充：0；
利润率：0.3倍；
位置：绝对位置；
最高：45%；
}
#滑块#箭头img：悬停{
不透明度：.75；
过滤器：alpha（不透明度=75）；/*适用于IE8及更早版本*/
}
#滑块#主{
宽度：-moz计算（100%-2米）；
宽度：-webkit计算（100%-2米）；
宽度：-o-钙（100%-2米）；
宽度：钙（100%-2米）；
高度：-moz计算（100%）；
身高：-webkit计算（100%）；
高度：-o-calc（100%）；
身高：钙（100%）；
位置：绝对位置；
排名：0；
左：2米；
填充：0；
z指数：1102；
}
#滑块#主#主内容{
宽度：100%；
高度：-moz计算（100%-7%）；
身高：-webkit计算（100%-7%）；
身高：-o-钙（100%-7%）；
身高：钙（100%-7%）；
}
#滑块#主#主页脚{
宽度：100%；
身高：7%；
}
.video js{margin:0 auto；}
.vjs全屏{padding top:0px}
.vjs默认皮肤.vjs大播放按钮{top:50%；left:50%；margin:-4em auto-6em；}
.vjs默认皮肤.vjs控制栏{右：3.25em；}
$（文档）.ready（函数（）{
var w=窗内宽度；
var h=窗内高度；
var myPlayer=videojs（“示例视频1”）；
如果（w/16>h/9）{
var r=（w-（16*（h/9））/2；
myPlayer.尺寸（（16*（h/9）），h）；
document.getElementById（'slider'）.style.right=r+'px'；
}否则{
var r=（h-（9*（w/16））/2；
myPlayer.尺寸（宽，（宽16）*9）；
document.getElementById（'player'）.style.marginTop=r+'px'；
}
});
//一旦视频准备好
videojs（“示例视频1”）.ready（函数（）{
var myPlayer=this；//存储视频对象
var aspectRatio=9/16；//组成纵横比
//myPlayer.play（）；
这是错误（）；
});
$（文档）.ready（函数（）{
var h=窗内高度；
var w=窗内宽度；
var r=0；
如果（h/9>w/16）{
r=w；
}否则{
r=（16*（h/9））；
}
var nr=r+‘px’；
var-toggle=true；
$（“#箭头”）。单击（函数（）{
var div=$（“#滑块”）；
如果（切换）{
div.animate（{width:nr}，“slow”）；
}否则{
div.animate（{width:'2em'}，“slow”）；
}
切换=！切换；
});
});

使用HTML5全屏API，如中所述，将视频和侧边栏放入容器中，使容器全屏显示，而不是使视频全屏显示

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