使用 iOS 平台在网页上加载多个视频答案

【问题标题】：Load more than one video on a webpage using the iOS platform使用 iOS 平台在网页上加载多个视频
【发布时间】：2012-02-07 20:09:31
【问题描述】：

我有一个包含四个 VIDEO 元素的网页。我知道在我明确触发它们的触摸事件之前，它们甚至不会开始加载任何元数据。我可以在触摸事件上连接一个事件处理函数，比如一个 BUTTON 元素，以便调用所有四个 VIDEO 元素上的“播放”方法吗？

我的意思是这样的：

$b1.bind("touchstart", function (e) {
    $v1.get(0).play();
    $v1.get(0).pause();
    $v2.get(0).play();
    $v2.get(0).pause();
    $v3.get(0).play();
    $v3.get(0).pause();
    $v4.get(0).play();
    $v4.get(0).pause();
});

当我尝试使用全屏视频打开四个单独的 QuickTime 窗口时。这不是我想要的效果，但至少我可以将所有四个都连接到处理程序。不过，问题是只有 $v4 真正开始加载任何内容，而其他三个显然从未开始加载。

【问题讨论】：

标签： ios html html5-video touch-event autoplay

【解决方案1】：

您不能同时播放多个视频。每次在 iOS 上启动视频时，当前正在运行的视频都会停止。这是对所有移动苹果设备的性能限制。出于同样的原因，preload 属性与当前的 iOS 设备无关。

我猜你希望视频是内联的？然后将webkit-playsinline 作为属性添加到每个<video> 元素：

<video src="myvideo.mp4" webkit-playsinline controls>

这样您可以将 4 个视频元素并排排列并使用本机视频控件（例如，允许稍后切换到本机全屏）。如果您想实现自己的控件，请忽略 controls 属性。

PS：跟进 0x60 的链接，您可以找到一个名为 iOS-Specific Considerations 的部分

【讨论】：

【解决方案2】：

您检查过this 吗？将您的代码设置为：<video preload="automatic" />，它应该预加载。

【讨论】：

抱歉，这仅适用于 Safari-Desktop。