Play HTML5 video in iOS/Android native media player

Question

Quite simple, I have a <video> tag as follows:

<video id="video" controls preload>
    <source src="media/video.mp4" type="video/mp4">
    <source src="media/video.webm" type="video/webm">
    <source src="media/video.ogv" type="video/ogg">
    Your browser does not support the video tag.
</video>

Fairly standard. However, I'd like the video to open up on mobile devices using the built-in media player, essentially like watching a YouTube video from Safari on an iPhone.

How could I achieve this? The mobile site is built using jQuery Mobile.

Also, I think I read somewhere that removing the type attribute from the <source> tag increases compatibility. Is this true?

Answer 1

Update: If you are trying to play the video file from an Hybrid android application, then below code should be of use for you. To play HTML5 videos in Android Native player here's a small piece of Java code to use -

Intent intent = new Intent(android.content.Intent.ACTION_VIEW);
Uri data = Uri.parse(“path of the video file”); //Specify the video file path
intent.setDataAndType(data,“video/mp4″);
startActivity(intent);

Now invoke the above Java native code using your JavaScript function passing the video element or path shown above and you should be good with your player.

To answer your second question, i think that removing type attribute doesn't increase the video compatibility in mobile phones as its a mandatory attribute to be set for the native player to know the encoding of the video file.

Answer 2

You could try using the emerging HTML5 Fullscreen API to do this. It looks supported in iOS5+ and Android 4.0+

Take a look at this tutorial or read the full spec.

And I've not heard of any benefit to removing the type attribute. Taking that out would likely cause problems.

Answer 3

Video.js is compatible across most browsers but you have to set the viewports etc for mobile browsers.

This tutorial could probably help you out a little more.