Question

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

我遇到的问题是确定我的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中都是左对齐的，我不知道如何确定'最佳'初始大小应该是什么。

任何有关采用此方法的最佳方式的建议都将受到赞赏。

谢谢。

Answer 1

我终于想出了一个解决方案并摆脱了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>');
});

现在很棒。

在DIV中自动重新调整嵌入式视频流的大小

1 个答案: