12

I understand that html5 video on Android cannot autoplay. As it stands my video works on the device only when the user clicks on the play button.

<video width="640px" height="360px" src="media/video/Moments_of_Everyday_Life.mp4" controls id="video"></video>


<script type="text/javascript">
    $(function(){
        var video  = document.getElementById('video');
        video.play();
    });
</script>

It works on my desktop though.

Why would this not work? And what is the difference between clicking play and using .play() ?

4
  • I'm confused. Are you saying this does work, or it doesn't work?
    – robertc
    Feb 15, 2013 at 14:05
  • Im saying it works when you click on the play conrol. But using calling video.play() does not work.
    – Harry
    Feb 15, 2013 at 14:10
  • In other words, manualy playing the video works. programaticly playing it does not
    – Harry
    Feb 15, 2013 at 14:12
  • @Harry I'm late to the game, but please see my new answer below... Jul 22, 2019 at 2:27

7 Answers 7

2

It wouldn't work for the same reason browsers block calls to window.open(), because allowing it would allow web developers to subvert user preference not to auto play media (or open popup windows).

The difference between clicking play and using this method is exactly what you've said: the click. These sort of calls are allowed in click events, but not generally.

5
  • so what your saying is there is no way for the video to autoplay? o you have a possible suggestion?
    – Harry
    Feb 15, 2013 at 14:17
  • Does your browser on your desktop block autoplay? Is there an open defect like this one against your browser? My suggestion is: don't have your app depend on autoplay (or a script equivalent), it's not a feature you can depend upon because browsers will continue implementing features to block it.
    – robertc
    Feb 15, 2013 at 14:23
  • I finally got it working! I think I will post my answer, cause most people on the net dont have an answer. Now lets hope this works for others
    – Harry
    Feb 15, 2013 at 14:39
  • @Harry when will you post your answer? May 21, 2016 at 7:11
  • This is the correct abridged answer; I embellished with an example below. Upvote here from me! Jul 22, 2019 at 2:34
2

I got it to work! Now it can play HTML5 video inline with "autoplay" working! Damn this took time! Ok this is what I did:

<div id=content>
    <video width="1280px" height="720px" src="file:///android_asset/videos/Moments_of_Everyday_Life.mp4"></video>
</div>

Note: Some people say they get it to work when adding poster and or preload. I got this working with and with out.

Javascript autoplay the video:

<script type="text/javascript">
    $(function(){
        function callback () {
            document.querySelector('video').src = document.querySelector('video').src
            document.querySelector('video').play();
        }
        window.addEventListener("load", callback, false);

    });
</script>

I hope this can help any one, I have struggled with this for a week now!

Just to be clear:

working on:

Android 4.0.4 Samsung 10.1 Tablet Native device Browser

4
  • I used the same code. It is not working on android. I am using SAPUI5 with phonegap.
    – abhash
    Apr 21, 2014 at 14:16
  • Dude am struggling for the 4 days, could please elabrate your HTML and Code. Please post it
    – Kalai.G
    Jul 19, 2014 at 13:01
  • How do I use this javascript snip for android ? Can you please edit the answer for the same ?
    – Jaydev
    Jun 23, 2016 at 6:23
  • This is not working for my android marshmallow in moto 4g plus. I am struggling for 2 days .Explain more
    – sradha
    Oct 26, 2016 at 5:03
2

After hours of searching and testing "solutions" this is the one that worked for me! Solved by Angry Fridges (thanks a lot for that).

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

noticed both autoplay and muted, they are both needed.

This allowed the video to play in both computer and on android phone.

1

I found on kitkat that Firefox will allow you to play videos programatically.

Also, Chrome will as well if you go into chrome://flags and enable the "Disable gesture requirement for media playback" option.

1

I've made the following discoveries about HTML5 video on Android 4.0+.

To perform these tests, I made a sandbox app which consisted of an HTML page saved in /assets.

HTML:

<!DOCTYPE html>

<html>
    <head>
        <title>HTML5 Video Test</title>
    </head>

    <body>

        <video preload="metadata"><source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4"></video>

        <script> 
          var myvideo = document.getElementsByTagName('video')[0];

          myvideo.addEventListener('loadeddata', function() {
            console.log("** RECEIVED loadeddata **");
            myvideo.play();//this first play is needed for Android 4.1+
          }, false);

          myvideo.addEventListener('canplaythrough', function() {
            console.log("** RECEIVED canplaythrough **");
            myvideo.play();//this second play is needed for Android 4.0 only
          }, false);

        </script>

    </body>
</html>

JAVA: ("/assets/html5video.html")

private WebView mWebView;
private ProgressBar mProgressBar;

@SuppressLint("NewApi")
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.videotest);

    // progress bar
    mProgressBar = (ProgressBar) findViewById(R.id.videotest_progressbar);
    mProgressBar.setProgress(0);
    mProgressBar.setVisibility(View.VISIBLE);

    // webview
    mWebView = (WebView) findViewById(R.id.videotest_webview);
    mWebView.getSettings().setJavaScriptEnabled(true);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1)
    {
        //NOTE: this is required only for Android 4.2.2+
        mWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
    }

    mWebView.setWebChromeClient(new WebChromeClient() {
        public void onProgressChanged(WebView view, int progress) {
            Log.i(TAG, "Progress = "+progress);
            mProgressBar.setProgress(progress);
        }
    });
    mWebView.setWebViewClient(new WebViewClient() {
        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
            Toast.makeText(TestActivity.this, "Problem loading webpage", Toast.LENGTH_LONG).show();
            mProgressBar.setVisibility(View.GONE);
        }
        public void onPageFinished(WebView view, String url) {
            mProgressBar.setVisibility(View.GONE);
        }
    });
}

@Override
protected void onResume() {
    super.onResume();
    mWebView.loadUrl("file:///android_asset/html5video.html");
}

Android 4.0.3 NOTE

I kept running into the annoying exception java.lang.Throwable: EventHub.removeMessages(int what = 107) is not supported before the WebViewCore is set up. Thankfully, it did not affect video playback.

1
  • It worked on all the phones I tried... until a colleague brought me an HTC One running Android 4.1.2. In contrast, the Samsung Note 2 that I have is also running Android 4.1.2 and it autoplays ! I suppose it's a good idea to specify the "poster" attribute. Jan 20, 2014 at 22:37
1

Or you can in initialize your WebView to do it easily, as follows:

webview.setWebViewClient(new WebViewClient() {
    // autoplay when finished loading via javascript injection
    public void onPageFinished(WebView view, String url) { mMessageContentView.loadUrl("javascript:(function() { document.getElementsByTagName('video')[0].play(); })()"); }
});

The above works fine for me.

0

I took some of the advice here, most notably from @JenniferG, however I still had to tweak to get a nice experience... Here are the main points

  • load the audio tags as @JenniferG has mentioned
  • use appropriate method to get access to DOM elements, for React, use refs
  • un-mute, and set volume before playing
  • play() method returns a promise (at least in Chrome); use catch to handle errors appropriately
  • be careful not to call play() while the sound is currently playing, it will fail in that case
  • user must interact with page before playback will work properly (see note below)

Note: If you don't have the user click on some button, you will get an error like this

play() failed because the user didn't interact with the document first.

Putting it all together, here is a sample React component which should serve as a decent starting point (it is contrived, but should illustrate the possibilities)

class AudioPlayer extends React.Component
{
    constructor(props) {
        super(props);
        this.audioRef = React.createRef();
        this.state = {
            interacted: false,
            firstSoundPlayed: false,
            secondSoundPlayed: false,
        };
    }

    playAudio = () => {
        const node = this.audioRef.current;
        node.muted = false;
        node.volume = 1.0;
        node
            .play()
            .catch((e) => {
                console.error('caught audio error: ', e.message);
            });
    }

    handleClick = () => {
        this.setState({
            interacted: true,
        });
        setTimeout(() => {
            this.playAudio();
            this.setState({
                firstSoundPlayed: true,
            });
            setTimeout(() => {
                this.playAudio();
                this.setState({
                    secondSoundPlayed: true,
                });
            }, 6000);
        }, 4000);
    }

    renderStartup = () => (
        <p>
            Please give me permission to play sounds...
            <button onClick={this.handleClick}>Grant permission</button>
        </p>
    )

    renderScreen = () => (
        <div>
            <p>I will play a sound as many times as I want now!</p>
            <p>A sound is about to play...</p>
        </div>
    )

    renderSecondSound = () => (
        <div>
            <p>Soon it will play again...</p>
        </div>
    )

    renderSummary = () => (
        <div>
            <p>Hope you found this demo useful...</p>
        </div>
    )

    render = () => {
        const {
            interacted,
            firstSoundPlayed,
            secondSoundPlayed,
        } = this.state;

        return (
        <div>
            <audio
                autoPlay
                muted
                src="https://freesound.org/data/previews/33/33245_65091-lq.mp3"
                ref={this.audioRef}
            />
            {interacted === false ? this.renderStartup() : null}
            {interacted === true && firstSoundPlayed === false ? this.renderScreen() : null}
            {interacted === false || firstSoundPlayed === false || secondSoundPlayed === true ? null : this.renderSecondSound()}
            {secondSoundPlayed === false ? null : this.renderSummary()}
        </div>);
    }
}

ReactDOM.render(
    <AudioPlayer />,
    document.getElementById('react')
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.0/umd/react-dom.production.min.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.