两个全屏视频背景并排在一个窗口中

问题描述：

我有两个视频并排在浏览器中，我希望它们具有浏览器窗口的完整大小。我不在乎裁剪视频。我希望让他们在视频中间的每一个中间位置都放置一个顶部，底部，右侧和左侧的溢出区域。我想要达到这个效果（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 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%; 
}

此解决方案适用于iframe，但不适用于html

两个全屏视频背景并排在一个窗口中

相关推荐