在DIV中自動調整大小的嵌入式視頻流

我有一個非常簡單的應用程序，它在象限中顯示四個視頻流。用戶可以雙擊每個視頻以激活全屏模式，然後再次返回到象限。這一切都很好。在DIV中自動調整大小的嵌入式視頻流

我遇到的問題是確定我的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中定位，我不確定如何確定「最佳」初始大小應該是多少。

任何建議，以最好的方式來接近這將不勝感激。

謝謝。

來源

2013-10-10 insultant

我終於想出了一個解決方案，擺脫了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插入嵌入狀態ts：

$(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-10 22:03:08 insultant

在DIV中自動調整大小的嵌入式視頻流

回答

相關問題