1

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

});

4

2 回答 2

2

使用http://updates.html5rocks.com/2011/10/Let-Your-Content-中所述的 HTML5 全屏 API，而不是使视频全屏显示，而是将视频和侧边栏放入容器中并使该容器全屏显示Do-the-Talking-Fullscreen-API。

于 2013-09-03T09:06:35.123 回答
1 
    myPlayer = videojs('example_video_1');
    myPlayer.one("click",function () {
        this.requestFullscreen();   
    });
于 2015-07-30T09:58:50.957 回答