自动调整 DIV 中嵌入视频流的大小

Auto re-size embedded video streams within DIVs

本文关键字：视频 调整 DIV      更新时间：2023-09-26

>我有一个非常简单的应用程序，可以在一个象限中显示四个视频流。 用户可以双击每个视频以激活全屏模式，然后再次恢复到象限。 这一切都很好用。

我遇到的问题是确定 DIV 中嵌入对象的正确位置/大小。 理想情况下，我希望视频完全占据每个 DIV，无论用户如何调整浏览器窗口的大小。

我的CSS看起来像这样：

.tl {
    position: absolute;
    top: 0;
    left: 0;
    right: 50%;
    bottom: 50%;
    background: white;
}
.tr {
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 50%;
    background: white;
 }
.bl {
    position: absolute;
    top: 50%;
    left: 0;
    right: 50%;
    bottom: 0;
    background: white;
}
.br {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
    background: white;
}

.HTML：

<body>
<div class='tr' id='vlc1'></div>
<div class='tl' id='vlc2'></div>
<div class='bl' id='vlc3'></div>
<div class='br' id='vlc4'></div>
</body>
</html>

还有我的JavaScript：

function play(instance, uri) {
    VLCobject.getInstance(instance).play(uri);
}
var player = null;
$(document).ready(function() {
    var mydiv = document.getElementById("tr");
    player = VLCobject.embedPlayer('vlc1', 400, 300, true);
    player.play("http://URL");
    player = VLCobject.embedPlayer('vlc2', 400, 300, true);
    player.play("http://URL");
    player = VLCobject.embedPlayer('vlc3', 400, 300, true);
    player.play("http://URL");
    player = VLCobject.embedPlayer('vlc4', 400, 300, true);
    player.play("http://URL");
});

我在这里创建了一个jsfiddle：http://jsfiddle.net/AD4Vp/

我认为也许我需要动态更改嵌入视频的大小？ 我知道我在这里定义视频大小(400,300(，但视频在每个div中仍然都是左向的，我不确定如何确定"最佳"初始大小应该是多少。

关于解决这个问题的最佳方法的任何建议将不胜感激。

谢谢。

我终于想出了一个解决方案并摆脱了jquery-vlc.js

我更新了我的 HTML 并将视频包装在另一个容器中：

.HTML：

<div class='tr'><div class="vlccontent" id='vlc1'></div></div>
<div class='tl'><div class="vlccontent" id='vlc2'></div></div>
<div class='bl'><div class="vlccontent" id='vlc3'></div></div>
<div class='br'><div class="vlccontent" id='vlc4'></div></div>

用于此的 CSS 是：

.vlccontent {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

在我的javascript中，我只使用jquery插入嵌入语句：

$(document).ready(function() {
    $('#vlc1').html('<embed type="application/x-vlc-plugin" toolbar="false" width="100%" height="100%" id="vlc_vid1" target="http://URL"></embed>');
    $('#vlc2').html('<embed type="application/x-vlc-plugin" toolbar="false" width="100%" height="100%" id="vlc_vid2" target="http://URL"></embed>');
    $('#vlc3').html('<embed type="application/x-vlc-plugin" toolbar="false" width="100%" height="100%" id="vlc_vid3" target="http://URL"></embed>');
    $('#vlc4').html('<embed type="application/x-vlc-plugin" toolbar="false" width="100%" height="100%" id="vlc_vid4" target="http://URL"></embed>');
});

现在效果很好。

相关文章：