Html5 ≪Video≫ Element on Android

HTML5 video element on Android

I've just done some experimentation with this, and from what I can tell you need three things:

1. You must not use the type attribute when calling the video.
2. You must manually call video.play()
3. The video must be encoded to some quite strict parameters; using the iPhone setting on Handbrake with the 'Web Optimized' button checked usually does the trick.

Have a look at the demo on this page: http://broken-links.com/tests/video/

This works, AFAIK, in all video-enabled desktop browsers, iPhone and Android.

Here's the markup:

<video id="video" autobuffer height="240" width="360">
<source src="BigBuck.m4v">
<source src="BigBuck.webm" type="video/webm">
<source src="BigBuck.theora.ogv" type="video/ogg">
</video>

And I have this in the JS:

var video = document.getElementById('video');
video.addEventListener('click',function(){
  video.play();
},false);

I tested this on a Samsung Galaxy S and it works fine.

Changing HTML5 video src dynamically on Android?

Not knowing what framework you're using, I just did a quick test for a similar scenario using an existing bare-bones Android app that loads an HTML page, and this worked for me (note that at runtime my webview is accessing assets from the file:///android_asset/ path as my videos are local to the project):

HTML

<video id="vid" width="320" height="240"></video>

Initial JS:

var path = 'file:///android_asset/';
var vid = document.getElementById('vid');
var src = document.createElement('source');

src.setAttribute('src', path + 'video1.mp4');

vid.appendChild(src);
vid.play();

to change the source to a new video

src.setAttribute('src', path + 'video2.mp4'); 

vid.load();
vid.play();

html5 video doesn't play on android without controls

Only video elements with the muted attribute set to true are allowed to autoplay on Android and iOS devices.

The following example would autoplay:

<div id="video_container">
    <video poster="" width="500" id="showReelVid" muted autoplay loop preload>
        <source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4">
        Your browser does not support HTML5 video :(.
    </video>
</div>

https://jsfiddle.net/16j6851z/

---

If you require audio, have the video play on click (or with other user input) instead:

HTML

<div id="video_container">
  <video poster="" width="500" id="showReelVid" loop preload>
    <source src="http://hemlockdevelopment.net/media/showreel_jurgen_reigman.mp4" type="video/mp4"> Your browser does not support HTML5 video :(.
  </video>
</div>

JS

var showReelVid = document.getElementById("showReelVid");
showReelVid.onclick = function() {
  showReelVid.play();
};

https://jsfiddle.net/p8cmv1vc/

HTML5 video element on Android does not play

Try to remove the codecs from the source listings.. It might be that the codecs you're listing are not present on Android, so it's choking.

If you use the src attribute, it'll auto-detect the codec, so it's using something else :)

Android HTML5 video issue

It is the poster's issue. I think if the poster is not set in code. The webview would set a default one for the video tag. So I set the value of poster as 'null'. It is ok.

---

Related Topics