Question

我有一个html5视频播放器，其自定义控件附加在同一个div中

<DIV CLASS="container">
<VIDEO SRC="Some video"/>
<DIV CLASS="CONTROLS">
<button>play</button>
<button>magic play</button>
</DIV>
</DIV>

和css;

.controls {
 display: none;
}
.container:hover .controls {
 display: block;
}

然后终于javascript

function clickedFullScreenThing(clicked) {
 var container = clicked.parentNode // may need to extend to get .container

 container.requestFullscreen();
}

当我将视频设置为全屏模式时，视频会使用

延伸至完整尺寸

.container:full-screen .controls video {
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:0; bottom:0;
    margin:auto auto;
}

和

.container:-webkit-full-screen .controls { display: block; }
.container:-moz-full-screen .controls { display: block; }
.container:full-screen .controls { display: block; }
.container:fullscreen .controls { display: block; }

视频似乎延伸到最大尺寸（分辨率相当低），但它并没有填满屏幕。这些控件也位于视频下方，而不是像之前一样好好地悬停在视频上。

如何让视频填满屏幕

N.B。 javascript只是它看起来的一个粗略的例子，那里有更多的跨浏览器代码，但它很难看。

html5视频播放器全屏

0 个答案: