How to autoplay HTML5 mp4 video on Android?

问题

I had developed a mobile page by asp.net to play mp4 video.

I know iOS had disabled the autoplay function to minimize user bandwidth, so how can i autoplay HTML5 mp4 video on Android ?

I had already put autoplay in HTML5 code, but it doesn\'t work.

The following is my code:

<video autoplay controls id=\'video1\' width=\'100%\' poster=\'images/top_icon.png\' webkitEnterFullscreen poster preload=\'true\'>
<source src=\'http://192.xxx.xxx.xx/XXXXVM01.mp4\' type=\'video/mp4; codecs=\'avc1.42E01E, mp4a.40.2\' >
</video>

Moreover, I had fixed the problem that user click on the image overlay can play the video. Thanks Karthi

here are the code:

<script type=\"text/javascript\">
    $(document).ready(function() {
    $(\"#video1\").bind(\"click\", function() {
    var vid = $(this).get(0);
    if (vid.paused) { vid.play(); }
    else { vid.pause(); }
    }); 
}); 
</script>

Thanks

Joe

回答1:

I don't think autoplay works on Android, but getting a video to play can be annoyingly tricky. I suggest giving this article a read: Making HTML5 Video work on Android phones.

回答2:

You can add the 'muted' and 'autoplay' attributes together to enable autoplay for android devices.

e.g.

<video id="video" class="video" autoplay muted >

回答3:

I used the following code:

// get the video
var video = document.querySelector('video');
// use the whole window and a *named function*
window.addEventListener('touchstart', function videoStart() {
  video.play();
  console.log('first touch');
  // remove from the window and call the function we are removing
  this.removeEventListener('touchstart', videoStart);
});

There doesn't seem to be a way to auto-start anymore.

This makes it so that the first time they touch the screen the video will play. It will also remove itself on first run so that you can avoid multiple listeners adding up.

回答4:

Android actually has an API for this! The method is setMediaPlaybackRequiresUserGesture(). I found it after a lot of digging into video autoplay and a lot of attempted hacks from SO. Here's an example from blair vanderhoof:

package com.example.myProject;

import android.os.Bundle;
import org.apache.cordova.*;
import android.webkit.WebSettings;

public class myProject extends CordovaActivity 
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        // Set by <content src="index.html" /> in config.xml
        super.loadUrl(Config.getStartUrl());
        //super.loadUrl("file:///android_asset/www/index.html");

        WebSettings ws = super.appView.getSettings();
        ws.setMediaPlaybackRequiresUserGesture(false);
    }
}

回答5:

Important Note: Be aware that if Google Chrome Data Saver is enabled in Chrome's settings, then Autoplay will be disabled.

回答6:

Autoplay only works the second time through. on android 4.1+ you have to have some kind of user event to get the first play() to work. Once that has happened then autostart works.

This is so that the user is acknowledging that they are using bandwidth.

There is another question that answers this . Autostart html5 video using android 4 browser

回答7:

In Android 4.4 and above you can remove the need for a user gesture so long as the HTML5 Video component lives in your own WebView

webview.setWebChromeClient(new WebChromeClient());
webview.getSettings().setMediaPlaybackRequiresUserGesture(false);

To get the video to autoplay, you'd still need to add autoplay to the video element:

<video id='video' controls autoplay>
  <source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' >
</video>

回答8:

similar to KNaito's answer, the following does the trick for me

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('player'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // A handler called preventDefault.
    alert("canceled");
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");
  }
}

回答9:

In Android 4.1 and 4.2, I use the following code.

    evt.initMouseEvent( "click", true,true,window,0,0,0,0,0,false,false,false,false,0, true );
    var v = document.getElementById("video");
    v.dispatchEvent(evt);

where html is

    <video id="video" src="sample.mp4" poster="image.jpg" controls></video>

This works well. But In Android 4.4, it does not work.

回答10:

Here is a plugin for PhoneGap which solved the problem for me: https://build.phonegap.com/plugins/1031

I simply included it in my config.xml

回答11:

<video autoplay controls id='video1' width='100%' poster='images/top_icon.png' webkitEnterFullscreen poster preload='true'>
<source src='http://192.xxx.xxx.xx/XXXXVM01.mp4' type='video/mp4; codecs='avc1.42E01E, mp4a.40.2' >
</video>

回答12:

I simplified the Javascript to trigger the video to start.

 var bg = document.getElementById ("bg"); 
 function playbg() {
   bg.play(); 
 }

<video id="bg" style="min-width:100%; min-height:100%;"  playsinline autoplay loop muted onload="playbg(); "><source src="Files/snow.mp4" type="video/mp4"></video>
</td></tr>
</table>

*"Files/snow.mp4" is just sample url

回答13:

Can add muted tag.

<video autoplay muted>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
</video>

reference https://developers.google.com/web/updates/2016/07/autoplay

回答14:

Chrome has disabled it. https://bugs.chromium.org/p/chromium/issues/detail?id=159336 Even the jQuery play() is blocked. They want user to initiate it so bandwidth can be saved.

来源：https://stackoverflow.com/questions/9075520/how-to-autoplay-html5-mp4-video-on-android

标签

android

html5

html5-video