移动设备上的HTML5视频行为

时间:2012-01-25 09:51:14

标签: javascript html5 mobile html5-video mobile-webkit

我正在构建一个网站,其中我有几个<video>元素(循环动画)作为我设计的一部分(而非实际视频)。这在桌面浏览器中运行良好,但我在移动设备上遇到麻烦。
当我在Android或iOS设备(即移动webkit)上显示网站时,我将获得操作系统的视频播放器外观,视频将打开当我点击它们时,在某种弹出窗口中。我知道我可以绕过自动播放限制,例如:

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

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

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

修改 标记是基本的<video> - 语法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>

4 个答案:

答案 0 :(得分:11)

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

  

多个同步音频或视频流

     

目前,运行iOS的所有设备仅限于播放单个设备   音频或视频流随时可用。播放多个视频端   边,部分重叠或完全覆盖 - 目前不是   iOS设备支持。播放多个同步音频流   也不受支持。您可以更改音频或视频源   然而,动态地。请参阅“按顺序更换媒体源”   的信息。

答案 1 :(得分:1)

不,Android或iOS设备(即移动网络套件)无法按您的意愿运行视频。视频将在设备的默认视频播放器中打开。

答案 2 :(得分:1)

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

答案 3 :(得分:1)

为什么需要windows.onload绕过自动播放?如果我没记错,请将preload标记正确设置为无

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

应该有用。

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

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