Question

我正在使用videojs.com视频播放器并且效果很好唯一的问题是我希望视频播放器是全屏尺寸而不是使用像素，例如，如果你在一个较小的屏幕上视频播放器看起来搞砸了。我试图使用100％而不是px，但它也搞砸了很多。还有其他方法可以让它自动适应整个屏幕吗？

<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px"
  poster="FF7.png"
  data-setup="{}">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
 </video>

Answer 1

您可以为视频使用父div容器，因此它就像是视频的跨浏览器锚点。您也可以使用media query min-aspect-ratio和max-aspect-ratio。

带编辑器的Codepen示例：

http://codepen.io/jonathan/pen/bEbdmz/?editors=110

全屏模式下的Codepen示例：

http://codepen.io/jonathan/full/bEbdmz/

HTML

<div id="video-wrapper">
    <video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px" poster="FF7.png" data-setup="{}">
        <source src="FF7.mp4" type='video/mp4' />
        <track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
    </video>
</div>

CSS：

html, body {
  height:100%;
}

body {
  margin:0;
  padding:0;
}

#video-wrapper {
   position: fixed;
   top: 0; 
   right: 0; 
   bottom: 0; 
   left: 0;
   overflow: hidden;
}

#video-wrapper >  #player {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   cursor:pointer;
}

@media (min-aspect-ratio: 16/9) {
    #video-wrapper >  #player { 
       height: 300%; 
       top: -100%; 
    }
}

@media (max-aspect-ratio: 16/9) {
    #video-wrapper > #player { 
       width: 300%; 
       left: -100%; 
    }
}

如果您需要JavaScript全屏解决方案，可以使用以下某些功能：

http://vodkabears.github.io/vide/

http://dfcb.github.com/BigVideo.js/

http://syddev.com/jquery.videoBG/

制作视频是全屏大小的CSS

1 个答案: