移动设备上的 HTML5 视频行为

Posted

技术标签:

【中文标题】移动设备上的 HTML5 视频行为【英文标题】:HTML5 video behavior on mobile devices 【发布时间】:2012-02-18 12:19:50 【问题描述】:

我正在建立一个网站,其中有几个 <video> 元素(循环动画)作为我的设计的一部分(而不是实际视频)。这在桌面浏览器中运行良好,但我在移动设备上遇到了麻烦。当我在 androidios 设备(即移动 webkit)上显示该网站时,我将获得操作系统的视频播放器外观,视频将在当我单击它们时会出现某种弹出窗口。我确实知道我可以通过以下方式绕过自动播放限制:

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

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

有人知道在移动设备上模拟/启用类似桌面的行为的可能性吗?谢谢!

编辑: 标记是基本的<video>-syntax btw:

<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>

【问题讨论】:

能否请您粘贴您正在使用的视频标签的html代码? @andriy.budzinskyy 添加了标记。 【参考方案1】:

嗯,我不确定 Android 但iOS devices can't run multiple video streams simultaneously:

多个同时的音频或视频流

目前,所有运行 iOS 的设备都仅限于播放单个 音频或视频流随时。并排播放多个视频 侧边、部分重叠或完全重叠——目前没有 在 iOS 设备上支持。播放多个同时的音频流 也不支持。您可以更改音频或视频源 然而,动态的。请参阅“按顺序更换媒体源”了解 详情。

【讨论】:

你知道是否有可能“欺骗”单个视频的占位符吗? 我尝试了类似的方法,但始终无法解决此限制。 我认为由于用户带宽的原因,ios 不喜欢自动播放或循环播放。以浏览器的工作方式在后台播放音频文件真的很困难。我真的不知道解决方法,但会感兴趣。 @Blynn:你不能像我在我的问题中绕过&lt;video&gt; 自动播放限制一样绕过&lt;audio&gt; 的自动播放限制吗? 我试过用 javascript、html 和 css 绕过它,但苹果似乎不允许这样做。您可以在点击时实现它,但仅此而已。【参考方案2】:

不,Android 或 iOS 设备(即移动 webkit)无法运行您想要的视频。视频将在设备的默认视频播放器中打开。

【讨论】:

【参考方案3】:

YouTube 使用带有 ios 的 mov 或 mp4 来加载视频的原生外观,或者它链接到他们的应用来播放视频,因为它安装在每个 ios 设备上。

【讨论】:

这是一个有趣的观点,从来没有想过看看“大人物”是如何处理这个问题的。不幸的是,Android 上基于 Web 的 YouTube 和 vimeo 视频也将在外部播放器中打开,是否可以在 iOS 上观看内嵌 YouTube 视频?【参考方案4】:

为什么需要windows.onload 来绕过自动播放?如果我记得正确地将preload 标签设置为无

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

应该可以。

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

编辑:关于j08691's answer,iPhone 的另一种方法可能是为iPhone 网站设计一个简单的Web 查看器应用程序,其中workaround 用于无多个视频播放问题。

【讨论】:

据我所知,移动设备会忽略 &lt;video&gt; 元素的 preload 属性(因此是 Javascript-“hack”)。不幸的是,每个人的视频都为我提供了一个可以在我的掌上电脑上下载的文件。该应用程序可能是一个非常好的主意,但在我的情况下不是一个选择。不过,感谢您的努力。 嗯,所以你要放弃这个?我真的不知道为什么该应用程序是一个选项,但是您能够在 android 上生成它吗?我也听说过从 javascript 到 ios 的本机交互。如果你真的非常需要它,你可以使用视频到 gif 转换器。网上有很多。祝你好运 问题是我正在尝试构建一种机制,以后可以在不同的情况下重用(即将其放入 jQuery 插件中)。对于有问题的网站,我总能找到一种解决方法,但很高兴知道是否有 one-fits-all 方法(目前似乎不存在)。感谢您的意见。

以上是关于移动设备上的 HTML5 视频行为的主要内容,如果未能解决你的问题,请参考以下文章

使用 HTML5 视频标签时,某些视频在移动设备上显示为白屏

使用视频标签html5时如何在移动设备上显示视频缩略图

如何在移动设备上更改 HTML5 视频的播放速度?

HTML5 视频标签在移动 Chrome 上的奇怪行为,但适用于 SAFARI

可以使用 HTML5/JS 远程访问移动设备上的文件吗?

移动设备上的 HTML5 base64 编码音频