Question

我在浏览器中有两个并排的视频，我希望它们具有浏览器窗口的完整大小。我不关心裁剪视频。我想让它们居中在视频中间，每一侧都有顶部，底部，右侧和左侧隐藏的溢出。我想实现这种效果（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>

Answer 1

我不知道我是否理解得很清楚，但您希望视频与网页的完整尺寸相同？这样的事情？

<强> 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%;
}

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

1 个答案: