我的视频元素包含一个以比例为4:3的网络摄像头流.我想打破比例,并调整到div的大小.我尝试过以下操作:
>设置宽度和高度100%>这不做任何事情,4:3仍然存在
>设置最小高度和最小宽度100%>这使得视频调整到真正巨大的溢出div的东西
> position:absolute,bottom,top,left和right:0px也是父div的巨大流量
>使用javascript获取父div的高度和宽度,然后将其设置为视频:无效果,4:3比例保留,无大小更改.
那么有没有人知道怎么做呢?
编辑:谢谢Gaurav的这个非常详细的答复.它看起来不错,我希望它可以为我工作.
.parentDiv // Results in around 400x400 pixels for me { position: absolute; top: 11px; right: 10px; left: 10px; height: -webkit-calc(50% - 18px); height: calc(50% - 18px); display: block; }
我的视频元素在那里,我给了你的CSS解决方案.不幸的是它只变白了我的parentDiv css可能与此有关系吗?
编辑2:这是HTML:
<div class="parentDiv"> <video class="cam_video" autoplay></video> </div>
这主要是它.视频的src属性设置为我的网络摄像头流.
编辑3:
如果我右键单击并检查此截图http://s22.postimg.org/th4ha8nmp/ratio2.png中的白色(现在是红色的涂鸦)部分,Chrome会显示白色也属于流.
看起来好像网络摄像头的流与顶部和底部的白色条纹一起出现.这是烦人的
解决方法
HTML
<div class="wrapper"> <video class="videoInsert"> <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> </div>
CSS
.videoInsert { position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; overflow: hidden; }
2)jQuery
HTML
<div id="video-viewport"> <video autoplay preload width="640" height="360"> <source src="https://s3.amazonaws.com/whiteboard.is/videos/bg-loop-new.mp4" /> </video> </div>
CSS
#video-viewport { position: absolute; top: 0; left:0; overflow: hidden; z-index: -1; /* for accessing the video by click */ } body{ margin:0; }
jQuery的
从这个答案 – simulate background-size:cover on <video> or <img>
06004
3)仅使用iframe css
HTML
<div class="wrapper"> <div class="h_iframe"> <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe> </div> </div>
CSS
.h_iframe iframe { position:absolute; top:0; left:0; width:100%; height:100%; }
原文地址:https://www.jb51.cc/css/214315.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。