CODEWITHSUNDEEP
htmlvideo.js
sudobangbang
sudobangbang

Reputation: 251

VideoJS+HTML5 Autoplay FAIL for Android 2.3+ and IOS 4+

My VideoJS and HTML5 project is targeting more recent web browsers ( newer versions of FireFox and Chrome ) as well as mobile browsers ( Android2.3+ and IOS4+ ).

I want all my videos to autoplay after they are "ready". I've tried doing this a couple ways ( mentioned in methods below ) but noticed that the autoplay only really works in FireFox and Chrome -- meaning the mobile browsers just sit and spin.

I haven't gotten as far as debugging the mobile browsers in their native emulators cause i wanted to see if someone here had previous advice on how to trouble shoot this.

Thanks

Method 1

Add the autoplay="true" attribute to the <video> tag:

<video id="my_videoplayer" class="video-js vjs-default-skin" controls
autoplay="true" preload="auto" width="425" height="225" poster="/img/Logo.png"
data-setup="{}">
    {% if is_help_video %}
    <source src="{{rackspace_cdn_url}}{{video_id}}" type="{{video_type}}">
    {% else %}
    <source src="{{rackspace_cdn_url}}{{video_id}}" type="{{video_type}}">
    {% endif %}
</video>

Method 2

Remove autoplay="true" attribute from <video> tag and try it through the VideoJS API on "ready" callback:

_V_('my_videoplayer').ready(function(){  

    MIMIC.video_player = this;

    this.addEvent( "ended", function(){

        {% if not is_help_video %}
            show_transition( true );
        {% endif %}

    });

    /*
    **
    **  try autoplay
    **
    */
    this.play();

});

Upvotes: 0

Views: 1387

Answers (1)

misterben
misterben

Reputation: 7821

iOS browsers don't support playback before any human interaction. Autoplay just does not work, and there has to be a touch/click event before initiating playback via the API. Android browsers now follow that behaviour.

Upvotes: 1

Related Questions