有没有人能够成功地将 video
元素调整为父 div?
我的视频元素包含一个网络摄像头流,其比例为 4:3
。我想打破比例并将其调整为 div 大小。我尝试了以下方法:
- 设置
宽度和高度 100%
> 这没有做任何事情,仍然是 4:3 - 将
min-height 和 min-width 设置为 100%
> 这会使视频调整到真正大到溢出 div 的大小 position:absolute, bottom, top, left and 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:
如果我右键单击并检查此屏幕截图中的白色(现在红色涂鸦)部分 https://s22.postimg.cc/th4ha8nmp/ratio2.png , Chrome 向我显示白色也属于流。
网络摄像头的流似乎在顶部和底部带有白色条纹。这很……烦人。
最佳答案
1) 仅限 CSS
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;
}
j查询
来自这个答案 - simulate background-size:cover on <video> or <img>
var min_w = 300; // minimum video width allowed var vid_w_orig; // original video dimensions var vid_h_orig; jQuery(function() { // runs after DOM has loaded vid_w_orig = parseInt(jQuery('video').attr('width')); vid_h_orig = parseInt(jQuery('video').attr('height')); $('#debug').append("<p>DOM loaded</p>"); jQuery(window).resize(function () { resizeToCover(); }); jQuery(window).trigger('resize'); }); function resizeToCover() { // set the video viewport to the window size jQuery('#video-viewport').width(jQuery(window).width()); jQuery('#video-viewport').height(jQuery(window).height()); // use largest scale factor of horizontal/vertical var scale_h = jQuery(window).width() / vid_w_orig; var scale_v = jQuery(window).height() / vid_h_orig; var scale = scale_h > scale_v ? scale_h : scale_v; // don't allow scaled width < minimum video width if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;}; // now scale the video jQuery('video').width(scale * vid_w_orig); jQuery('video').height(scale * vid_h_orig); // and center it by scrolling the video viewport jQuery('#video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2); jQuery('#video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2); };
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%;
}
关于css - 将 <video> 元素调整到父 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23248441/