HTML5 <Video> Element on Android Does Not 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 :)

Mp4 video in html5 video tag not playing in mobile chrome and mobile safari

Very simply there is no support for autoPlay on mobile safari . Please test all android browsers .

I use one trick with buffering (show some popup to force user for initial first click on any tag/document - It is smart to use accept cookies or term of use popups):

var ONLYONETIME_EXECUTE = null;
window.addEventListener('load', function(){ // on page load
 
      document.body.addEventListener('touchstart', function(e){
    
    if (ONLYONETIME_EXECUTE == null) {   

        video.play();

        //if you want to prepare more than one video/audios use this trick :             
          video2.play();
          video2.pause();
          // now video2 is buffering and you can play it programmability later 
          // My personal testing was maximum 6 video/audio for android 
          // and maybe 3 max for iOS using single click or touch.
          // Every next click also can prepare more audios/videos.

        ONLYONETIME_EXECUTE = 0;
    }

  }, false)
 
}, false)

// It is very usually that user touch screen  ...

Review :

I dont understand ios html5 politic . They stop supporting javascript console logger (i quest now :from ver 5.1 ios) .Auto play disabled , webrtc ...
They wanna device who works perfect. Auto play can be dangerous on load. In near future i expect activation full html5 support on all mobile devices.

New update :
I found this like positive answer :

Since the release of iOS 10 Apple has allowed muted video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/

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.

HTML5 Video does not play in mobile device

Couple of things to try:

1. Use absolute URLs in 'Video src' attribute

2. Some devices may take little extra time to load the video

3. Change the device and try ( as you said)

Hope this will help.

---

Related Topics