移动设备上的 HTML5 视频行为 [英] HTML5 video behavior on mobile devices

问题描述

我正在构建一个网站，其中有几个 元素(循环动画)作为我设计的一部分(而不是实际视频).这在桌面浏览器中效果很好，但我在移动设备上遇到了麻烦.
当我在 Android 或 iOS 设备(即移动 webkit)上显示网站时，我将获得操作系统的视频播放器外观并且视频将打开当我点击它们时，在某种弹出窗口中.我知道我可以通过以下方式绕过自动播放限制:

I am building a site where I have several <video> elements (looped animations) that act as part of my design (not as an actual video). This works quite well in desktop browsers, yet I am in trouble on mobile devices.
When I display the site on Android or iOS devices (ie. mobile webkit) I will get the OS's video player appearance and the videos will open in some sort of popup when I click them. I do know that I can bypass the autoplay restrictions by doing sth like:

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

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

But this will again open the video(s) in a seperate window...

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

Does anyone know of a possibility to emulate / enable desktop-like behavior on mobile devices? Thanks!

标记是基本的-syntax btw:

Markup is basic <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>

推荐答案

嗯，我不确定 Android 但iOS 设备无法同时运行多个视频流:

Hmm, I'm not sure about Android but iOS devices can't run multiple video streams simultaneously:

多个同步音频或视频流

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

Currently, all devices running iOS are limited to playback of a single audio or video stream at any time. Playing more than one video—side by side, partly overlapping, or completely overlaid—is not currently supported on iOS devices. Playing multiple simultaneous audio streams is also not supported. You can change the audio or video source dynamically, however. See "Replacing a Media Source Sequentially" for details.

这篇关于移动设备上的 HTML5 视频行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！