iPad/iphone上的HTML5视频背景

Question

我使用此解决方案使用html5视频作为我的网站的背景.

然而,它似乎不适用于iPad/iPhone,我得到的只是一个黑屏,视频没有调整大小.

此外,当窗口的宽高比与视频的宽高比不同时,视频不能正确调整大小.您将看到背景图像开始变得可见.

谢谢!

Answer 1

在http://www.develooping.com/canvas-video-player/中,您可以看到在iPad/iPhone中使用的响应式mp4背景.从http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip下载代码.它使用了Stanko的改编版HTML画布视频播放器脚本 ;

<div class="video-responsive">
  <video class="video" muted="muted" loop="loop" autoplay="autoplay">
  <source src="mY_movie.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
  </video>

<canvas class="canvas"></canvas>        

<div id="over_video">Look at me</div>
</div>

脚本使用如下

<script src="canvas-video-player.js"></script>
<script>

var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);

if (isIOS) {

    var canvasVideo = new CanvasVideoPlayer({
        videoSelector: '.video',
        canvasSelector: '.canvas',
        timelineSelector: false,
        autoplay: true,
        makeLoop: true,
        pauseOnClick: false,
        audio: false
    });

}else {

    // Use HTML5 video
    document.querySelectorAll('.canvas')[0].style.display = 'none';

}   

</script>

CSS是

body {
background: #000;
padding:0;
margin:0;
}
.video-responsive {
padding-bottom: 56.25%;
position: relative;
width: 100%;
}

.canvas,
.video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background: #000;
z-index: 5;
}
#over_video{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 0;
z-index: 10;
font-size: 12vw;
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 20%;
text-shadow: 4px 4px 4px #5C433B;
}

希望它可以提供帮助.

Answer 2

只需标记为记录.如今,由于WebKit的新策略,支持背景视频的能力(iOS 10 +).

具体来说,请查看下面的官方文档. https://webkit.org/blog/6784/new-video-policies-for-ios/

Answer 3

不幸的是,iPad不支持自动视频播放,因此您需要播放/停止/暂停按钮.这是一个可以在iPad上运行的例子:http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/1

Answer 4

SquareSpace使用一种有趣的方法,通过使用巧妙的.pngs和叠加循环在他们的网站上"模拟"视频.见http://www.squarespace.com/

如果你筛选HTML,你会在这里找到手序:http://cf.squarespace.com/details/musician-hand-sequence-hires.png

它适用于手机..只是需要考虑的事情.

Answer 5

由于iOS10提供了解决方案，请参见此处：https ://webkit.org/blog/6784/new-video-policies-for-ios/

在iPhone上，<video playsinline>元素现在将允许内联播放，并且在开始播放时不会自动进入全屏模式。 <video>没有playinline属性的元素将继续需要全屏模式才能在iPhone上播放。当以捏合手势退出全屏显示时，<video>没有playinline的元素将继续以内联方式播放。