Question

我正在尝试插入一个视频，让它在我的主页上占据我身体div的100％。在我的标题下方，在我的页脚上方，但是该区域的100％！基本上它的蓝色烟雾，我希望它成为你到达主页时的主要焦点。我需要它才能做出回应，我听说iphone和ipad无法识别我给视频的尺寸吗？

我正在尝试使用演示版本。 http://www.istockphoto.com/stock-video-35477950-blue-ink-explosion.php?st=86374c9

http://jsfiddle.net/ZNvjL/10/

<div id="body">

<video width="1000" height="350" autoplay loop preload="auto">
  <source src="media/smokehome.mp4" type="video/mp4">
  <source src="media/smokehome.ogg" type="video/ogg">
  <source src="media/smokehome.webm" type="video/webm">
  <object data="media/smokehome.mp4" width="1000" height="350">
    <embed src="media/smokehome.swf" width="1000" height="350">
  </object> 
  Your browser does not support the video tag.
</video>

<canvas id="myCanvas" style="border:0px solid #FFF;"> 
</canvas> 

</div>

我读过使用画布因为Iphone和ipad会识别尺寸吗？

Answer 1

您可以使用HTML / CSS执行此操作，它适用于iphone / ipad，请查看如何操作的小提琴：

#video_background { 
position: absolute; 
bottom: 0px; 
right: 0px; 
min-width: 100%; 
min-height: 100%; 
width: auto; 
height: auto; 
z-index: -1000; 
overflow: hidden;
}
#video_pattern { 
background-image: url(../images/pattern.png); 
position: fixed; 
opacity: 0.8; 
left: 0px; 
top: 0px; 
width: 100%; 
height: 100%; 
z-index: 1
}

http://jsfiddle.net/MxUQQ/

注意：您可能需要考虑视频背景是否适合移动设备，具体取决于互联网速度，这可能会带来糟糕的用户体验

Answer 2

JSFiddle

查看我的小提琴，将您的视频放在页眉和页脚之间。此外，最好保持宽高比，以便您的视频看起来不那么有趣。

<强> HTML

<body>
    <header>HEADER</header>
    <div class="video_holder">
        <video controls>
            <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">Your          browser does not support the video tag.
        </video>
    </div>
    <footer>FOOTER</footer>
</body>

<强> CSS

body {
    height: 100%;
    width: 100%;
    margin:0;
    padding: 0;
}
video {
    height: auto;
    min-height:100%;
    width: 100%;
    min-width: 100%;
}
.video_holder {
    height: 100%;
    min-height:100%;
    width: 100%;
    min-width: 100%;
}
header, footer {
    height: 50px;
    width: 100%;
    background: #0096ff;
}

使用HTML5 / Jquery将视频插入Div中

2 个答案: