1
我正在使用VideoJS作为我的HTML5视频播放器，并且正在尝试为其他自定义控件添加边栏。我的自定义栏是可见的，并在普通视图模式下运行，但在全屏视图模式下消失。如何使元素在全屏模式下可视化VideoJS
下面是一些代码...
<!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="#"> </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="#"> </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="#"> </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="#"> </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;
});
});