Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android HTML5 video - works when clicking play, but not video.play()

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() ?

like image 394
Harry Avatar asked Feb 15 '13 13:02

Harry


1 Answers

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

like image 101
Harry Avatar answered Oct 21 '22 06:10

Harry