Question

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!

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

Answer 1

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

Multiple Simultaneous Audio or Video Streams

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.