兩個全屏視頻背景並排在一個窗口中

-1

我有兩個視頻並排在瀏覽器中，我希望它們具有瀏覽器窗口的完整大小。我不在乎裁剪視頻。我希望讓他們在視頻中間的每一箇中間位置都放置一個頂部，底部，右側和左側的溢出區域。我想要達到這個效果（http://css-tricks.com/multiple-backgrounds-left-half-and-right-half/），但對於視頻本質而言。兩個全屏視頻背景並排在一個窗口中

我的代碼如下：

<!DOCTYPE HTML> 
<html> 
<head> 

<style> 
#leftHalf { 
    width: 50%; 
    position: absolute; 
    left: 0px; 
    overflow: hidden; 
} 
#rightHalf { 
    width: 50%; 
    position: absolute; 
    right: 0px; 
    overflow: hidden; 
} 
</style> 

</head> 


<body> 

<!--This is the code that's not working, should have specified--> 
    <video id="rightHalf"width="100%" height="100%" preload autoplay loop muted> 
      <source src="videos/sky.webmsd.webm" type="video/webm"> 
      <source src="videos/sky,mp4" type="video/mp4"> 
      Your browser does not support HTML5 video. 
    </video> 

    <video id="leftHalf" width="100%" height="100%" preload autoplay loop muted> 
      <source src="videos/MVI_2987_1.mp4" type="video/mp4"> 
      <source src="videos/MVI_2987_1.webmhd.webm" type="video/webm"> 
      Your browser does not support HTML5 video. 
    </video> 

</body> 

</html>

來源

2014-09-24 JakeB

好了，這有什麼錯，你有什麼？ – 2014-09-24 01:34:15

輸出是怎麼回事？它做了什麼，它不應該做什麼？你可以上傳演示或屏幕？ – sidewaiise 2014-09-24 01:34:41

我改變了它，所以你可以測試自己。它們並排出現，但它們不是瀏覽器窗口的全高 – JakeB 2014-09-24 01:44:48

我不知道如果我理解得很好，但你想要的影片，像網頁的全尺寸？像這樣？

Online Demo

如果是，改變iframe的參數爲100％，這樣

<iframe id="leftHalf" width="100%" height="100%" src="http://www.youtube.com/embed/XGSy3_Czz8k"> 
</iframe> 

<iframe id="rightHalf" width="100%" height="100%" src="http://www.youtube.com/embed/XGSy3_Czz8k"> 
</iframe>

------------- 更新編輯 - -----------

對於HTML視頻元素：

Online Demo

HTML

<div class="leftHalf"> 
    <video preload autoplay loop muted> 
     <source src="examples/video-example.mp4" type="video/mp4"> 
     <source src="examples/video-example.webm" type="video/webm" /> 
     Video not supported. 
    </video> 
</div> 


<div class="rightHalf"> 
    <video preload autoplay loop muted> 
     <source src="examples/video-example.mp4" type="video/mp4"> 
     <source src="examples/video-example.webm" type="video/webm" /> 
     Video not supported. 
    </video> 
</div>

CSS

.leftHalf { 
    position:absolute; 
    left: 0px; 
    height:100%; 
    width:50%; 
    overflow: hidden; 
} 

.rightHalf { 
    position:absolute; 
    right: 0px; 
    height:100%; 
    width:50%; 
    overflow: hidden; 
} 

.leftHalf video { 
    min-width: 100%; 
    min-height: 100%; 
} 
.rightHalf video { 
    min-width: 100%; 
    min-height: 100%; 
}

來源

2014-09-24 01:57:15

此解決方案適用於iframe，但不適用於html

兩個全屏視頻背景並排在一個窗口中

回答

相關問題