1

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

我遇到的问题是确定我的 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 中仍然都是左向的，我不确定如何确定“最佳”初始大小应该是多少。

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

谢谢你。

4

1 回答 1

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>');
});

现在效果很好。

于 2013-10-10T22:03:08.613 回答