Question

我使用this solution将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下载代码。它使用HTML canvas video player script by Stanko;

的改编版本

<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＆gt;现在可以允许元素内联播放，并且在播放开始时不会自动进入全屏模式。 <video＆GT;没有playinline属性的元素将继续需要全屏模式才能在iPhone上播放。使用捏合手势退出全屏时，<video＆gt;没有playinline的元素将继续内联播放。

Answer 6

在移动设备上自动播放视频的唯一方法是放弃html视频标记。

假设您不需要音频，我会看到三个选项：

使用gif代替视频。根据动画的不同，文件大小会突然增加
使用包含视频每一帧的超长jpg或png，然后使用javascript转换它们
使用javascript解码视频。例如use this h.264 decoder and play videos with good compression。我看到的唯一不足之处是它需要相当多的CPU来进行解码。

我选择了最后一个解决方案并且工作正常。

Answer 7

我偶然发现了可能有助于你完成这项任务的事情。

http://vagnervjs.github.io/frame-player/

它是一个JS播放器，它接收代表视频帧的JSON图像列表。

这也将提供关于视频本身的样式选项和响应性的灵活性..

例如，您可以加载一组不同的图像（质量较低）来支持IPAD与桌面支持。

Answer 8

我认为最简单的方法，只需使用gif作为背景。例如，您可以像在http://ezgif.com/video-to-gif

中一样在线转换

iPad / iphone上的HTML5视频背景

8 个答案: