12

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>
m90
  • 11,434
  • 13
  • 62
  • 112

4 Answers4

11

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.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • Do you know if there's a possibility to "trick" the placeholder for a single video? – m90 Mar 19 '12 at 08:12
  • I tried something similar and was never able to work around this limitation. – j08691 Mar 19 '12 at 12:14
  • I think ios doesn't like autoplay or loop because of user bandwidth. It's really hard to get an audio file to play in the background the way the the browser works. I don't really know of a workaround but would be interested. – Blynn Mar 20 '12 at 19:34
  • @Blynn: Can't you bypass the autoplay-restriction of an ` – m90 Mar 23 '12 at 16:53
  • I've tried bypassing it with javascript, html, and css but it appears Apple will not allow that. You can make it happen on click but that's about it. – Blynn Mar 23 '12 at 17:28
1

No, Android or iOS devices (ie. mobile webkit) are not able to run video as you are wanting . Video will open in a default video player of device.

Mustafa Amin
  • 70
  • 2
1

YouTube uses a mov or mp4 with ios to load the native look and feel for videos, or it links out to their app to play the video since it's installed on every ios device.

Blynn
  • 1,411
  • 7
  • 27
  • 48
  • That's an interesting point, never thought about looking at how "the big ones" handle this. Web-based YouTube and vimeo videos on Android will open in the external player as well unfortunately though, is it possible to watch inline YouTube videos on iOS? – m90 Mar 21 '12 at 07:07
1

Why do you need windows.onload to bypass autoplay? If I remember correctly setting the preload tag to none

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

should work.

Also, have you tried using the Video For Everybody approach? With that should be able to get the video to play in the web page rather than by the phone's OS, that way I believe you can achieve the same effect on supported devices.

EDIT: In regards to j08691's answer, an alternative approach for iPhones could be to design a simple web viewer app for the site for iPhone which has a workaround for the no-multiple video playing problem.

Community
  • 1
  • 1
Chibueze Opata
  • 9,856
  • 7
  • 42
  • 65
  • As far as I have experienced mobile devices will ignore the preload attribute of ` – m90 Mar 25 '12 at 08:49
  • hmmm, so you're giving up on this? I don't really know why the app is an option, but have you been able to produce it on android? Also I've heard of native interaction to ios from javascript. And if you really need it very badly, you can use a video to gif converter. There're many of them online. Good luck – Chibueze Opata Mar 25 '12 at 09:16
  • 1
    The thing is that I am trying to build a mechanism that I can reuse in different situations lateron (i.e. putting it into a jQuery-plugin). For the site in question I can always find a workaround, yet it would be nice to know if there's a *one-fits-all* approach (which seems to be not existent at the moment). Thanks for the input. – m90 Mar 25 '12 at 09:21