iPad/iphone 上的 HTML5 视频背景

Posted 2023-05-07

【中文标题】iPad/iphone 上的 HTML5 视频背景

【英文标题】：HTML5 video background on iPad/iphone

【发布时间】：2012-03-04 20:29:23

【问题描述】：

我使用this solution 使用html5 视频作为我网站的背景。

但是，它似乎不适用于 iPad/iphone，我得到的只是黑屏，而且视频没有调整大小。

此外，当窗口的纵横比与视频的纵横比不同时，视频无法正确调整大小。您将看到背景图像开始变得可见。

谢谢！

【问题讨论】：

不，他指出的答案是专门针对 HTML5 的。你的视频是什么格式的？你的代码在哪里？没有例子就很难提供帮助。

您可以在 www.trabam.com/greg 查看它

显然在移动网站上使用视频背景是“糟糕的形式”，因为移动数据成本仍然是“骗局”水平。我每月从加拿大的 Rogers 获得 500 mb .. 每 100mb 超过 5 美元。

【参考方案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;

希望对你有帮助。

【讨论】：

为此我花了几天时间，只有您的解决方案有效！谢谢！

我无法在 .php 页面中完成这项工作，怎么办？

看起来这不再是必要的了——我也发布了一个新的答案，Stanko 自己说因为 ios10 已经贬值了，请在此处查看解决方案：webkit.org/blog/6784/new-video-policies-for-ios

【参考方案2】：

只需标记为记录。 现在，由于WebKit的新政策，支持背景视频的能力（iOS 10 +）。

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

【讨论】：

+1 这是当今的实际答案！尽管需要满足某些条件，例如需要将视频静音才能使其正常工作，但这是合适的方法。

* 音频必须静音或视频没有音轨 * 必须设置自动播放 * 使用 playsinline 标签（视频将在正常浏览器视图中播放，而不是全屏）

【参考方案3】：

由于iOS10有解决方案，看这里：https://webkit.org/blog/6784/new-video-policies-for-ios/

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

【讨论】：

这应该是现在公认的答案。在 React 中，属性必须是 playsInline。

【参考方案4】：

很遗憾，iPad 不支持自动视频播放，因此您需要一个播放/停止/暂停按钮。以下是在 iPad 上运行的示例：http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/1

【讨论】：

我注意到视频无法在 iPad os7 safari 上播放，除非我点击暂停，然后再播放。可能是因为视频在加载之前尝试启动？

【参考方案5】：

SquareSpace 使用一种有趣的方法来“模拟”其网站上的视频，即使用 .png 和叠加层的巧妙循环。见http://www.squarespace.com/

如果您筛选 HTML，您会在此处找到手序列：http://cf.squarespace.com/details/musician-hand-sequence-hires.png

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

【参考方案6】：

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

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

使用 gif 而不是视频。根据动画的不同，文件大小会飞涨 使用包含视频每一帧的非常长的 jpg 或 png，然后使用 javascript 切换它们 使用 javascript 解码视频。例如use this h.264 decoder and play videos with good compression。我看到的唯一缺点是解码需要相当多的 CPU。

我选择了最后一个解决方案，效果很好。

【参考方案7】：

我偶然发现了一些可以帮助你完成这项任务的东西..

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

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

这还将在视频本身的样式选项和响应能力方面提供灵活性..

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

【参考方案8】：

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