将视频设为全屏尺寸 CSS

Posted

技术标签:

【中文标题】将视频设为全屏尺寸 CSS【英文标题】:Make a video be full screen size CSS 【发布时间】:2015-12-09 16:41:06 【问题描述】:

我正在使用 videojs.com 视频播放器,效果很好,唯一的问题是我希望视频播放器为全屏尺寸,而不是使用像素,例如,如果您在较小的屏幕上播放视频玩家看起来一团糟。 我尝试使用 100% 而不是 px 但它也搞砸了很多。 有没有其他方法可以让它自动适应整个屏幕?

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

【问题讨论】:

Is there a way to make html5 video fullscreen? 的可能重复项 【参考方案1】:

在此处查看Codepen

video  
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;

【讨论】:

没有帮助...现在看起来更糟了:/ gyazo.com/678b7bd35604140b9340a8767f733207 你看过codepen吗?只需获取您需要的代码,而不是全部。如果没有帮助,请删除翻译。并且位置固定 鉴于 codepen 有效而您的网站无效,我觉得您网站的 HTML 或 CSS 可能存在一些特殊的干扰。在层次结构中的视频上方,你能找到任何在 CSS 中设置position 属性的元素吗?【参考方案2】:

您可以为您的视频使用父级div 容器,因此它就像您的视频的跨浏览器锚一样。你也可以使用media querymin-aspect-ratiomax-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"   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的主要内容,如果未能解决你的问题,请参考以下文章

Silverlight播放器:点击按钮(html / javascript)将视频设置为全屏? [关闭]

旋转 90 时如何将 TextureView 大小调整为全屏?

想要为全屏视频背景上的音频创建自定义静音/取消静音按钮

无 JS 的全屏 HTML5 视频背景

如何将 QVideoWidget 设置为全屏并在全屏小部件中有音量滑块?

Swift 2 AVPlayer - 播放下一个视频 上一个视频