移动设备上的HTML5视频行为

Question

移动设备上的HTML5视频行为

javascripthtmlmobilehtml5-videomobile-webkit

12

我正在构建一个网站，其中包含几个<video>元素（循环动画），它们作为我的设计的一部分（不是实际视频）。在桌面浏览器中，这样做非常好，但在移动设备上会遇到问题。
当我在Android或iOS设备上显示网站（即移动webkit）时，我将获得操作系统的视频播放器外观，并且当我单击它们时，视频将在某种弹出窗口中打开。我知道我可以通过执行某些操作来绕过自动播放限制：

window.onload = function() {
    var pElement = document.getElementById("myVideo");
    pElement.load();
    pElement.play();
};

但这将再次在单独的窗口中打开视频...

有人知道是否有可能在移动设备上模拟/启用类似桌面的行为吗？谢谢！

编辑： 顺便说一句，标记语言是基本的<video>语法：

<video autoplay loop>
    <source src="vid.mp4" type="video/mp4" />
    <source src="vid.ogg" type="video/ogg" />
    <source src="vid.webm" type="video/webm" />
</video>

- m90

请问您能够复制一下您所使用的视频标签的 HTML 代码吗？ - Andriy Budzinskyy

@andriy.budzinskyy 已添加标记。 - m90

4个回答

1

为什么需要使用 windows.onload 来绕过自动播放？如果我没记错的话，将 preload 标签设置为 none 即可。

<video src="vid.mov" preload=”none”></video>

应该可以工作。

另外，您尝试过使用Video For Everybody的方法吗？通过这种方式，应该能够在网页中播放视频，而不是通过手机操作系统播放，这样我相信您可以在支持的设备上实现相同的效果。

编辑：关于j08691的答案，iPhone的另一种替代方法可能是为网站设计一个简单的Web浏览器应用程序，该应用程序具有解决方案，以解决无法多次播放视频的问题。

- Chibueze Opata

就我所知，移动设备会忽略<video>元素的预加载属性（因此需要使用JavaScript“hack”）。对于每个人的视频不幸地在我的手持设备上提供了一个下载文件。该应用程序可能是一个非常好的想法，但在我的情况下不是一个选项。尽管如此，还是感谢您的努力。 - m90

嗯，所以你放弃了吗？我不太清楚为什么应用程序是一个选项，但你能在安卓上制作它吗？此外，我听说过可以通过JavaScript与iOS进行本地交互。如果你真的非常需要它，你可以使用视频转GIF转换器。网上有很多这样的工具。祝好运！ - Chibueze Opata

1

问题是我正在尝试构建一个机制，以便稍后在不同情况下重复使用它（即将其放入jQuery插件中）。对于所讨论的网站，我总是可以找到解决方法，但如果有一个一刀切的方法就更好了（目前似乎不存在）。感谢您的意见。 - m90

1

不，Android或iOS设备（即移动webkit）无法以您所希望的方式运行视频。视频将在设备的默认视频播放器中打开。

- Mustafa Amin

1

YouTube使用mov或mp4与iOS一起加载本地视频外观和感觉，或者它链接到他们的应用程序以播放视频，因为它已安装在每个iOS设备上。

- Blynn

这是一个有趣的观点，从未考虑过如何看待“大公司”如何处理这个问题。不幸的是，在Android上，基于Web的YouTube和vimeo视频也会在外部播放器中打开，但在iOS上是否可能观看内联YouTube视频呢？ - m90

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- j08691 · Accepted Answer

嗯，我不确定Android是否可以但是iOS设备无法同时运行多个视频流：

多个同时音频或视频流

目前，所有运行iOS的设备一次只能播放一个音频或视频流。在iOS设备上播放超过一个视频 - 并排、部分重叠或完全覆盖 - 目前不受支持。同时播放多个音频流也不受支持。但您可以动态更改音频或视频源。有关详细信息，请参阅“按顺序替换媒体源”。