user-initiated Play button not triggering the video to start automatically in iOS

Question

I am using flowplayer to play live video in desktop and for touch devices i am using the ipad plugin of flowplayer to play the video in the HTML5 video player. Here is the workflow of the player i am doing :

function authStream()
{
        $.ajax({
            dataType: 'jsonp',                  
            data: 'jsonp=getToken',
            jsonp: 'jsonp_callback',
            url:'http://server/getToken?channelId=id of the channel played',
            success:function(data){
            }
        });
        return;
}
function getToken(data)
{
        if(data.ErrorCode == -1){
            alert(data.message);
            return;                             
        }
        if(!data.tk) {
            alert('User not authorized to watch the show.');
            return;
        }

        var token = "?token="+data.tk;
        playVideo(token);   
        return; 
}

$('#button1').click(function(){ 
    authStream();   
}); 

function playVideo(token){
    var url;
    if(isIpad || isIphone) {
        url = 'http://server/live/_definst_/name of video/playlist.m3u8'+token;
    } else {
        url = 'name of video.sdp'+token;
    }

$f("ipad", {'src': "flowplayer-3.2.7.swf", 'wmode': 'opaque'}, {
    clip: {
        url:url,
        autoPlay: true,
        live: true,
        provider: 'rtmp',
        scaling: 'orig'
    },
    plugins: {
        rtmp: {
            url: 'flowplayer.rtmp-3.2.3.swf',
            netConnectionUrl:'rtmp://server/live/_definst_/'
        }

    },  
    onLoad : function() {
        $f().play();
    }   
}).ipad();

}

Now the problem is autoplay of video is not working in ios (ipad, iphone). I know autoplay by default is prevented for those devices. For this i am using $f().play(); to trigger the autoplay. I tried several methods of using it but could not make it work. The only possible way i found is when i call authStream function in $(document).ready() and then use $f().play(); in $('#button1').click() the video plays without requiring to click for the second time to play the video in ipad. I want to do the same working but dont want to call authStream function in $(document).ready(). I want to do something like the way i tried in the sample code and also want to play video automatically on click of the button without requiring to click for the second time in ipad. Now i need to click twice to play the video in touch devices. Please anyone suggest what possible way i can try to make the method work in ios (ipad).

EDIT : It seems the play control in ipad html5 player does not get triggered. Is there any way to trigger the play button of html5 player from the click of #button1. I am not getting any idea to make it work.

Martin Martin · Accepted Answer · 2012-02-05T11:10:10

I never tried Flowplayer on iOS (I only used pure HTML5 player), but my expierence is, that the built-in player only starts if the play event is user triggered. Seems like there is no way to get a real autoplay functionality.

Edit: If you want to send your Ajax request on click on play button, try calling your authStream method from onStart event (documentation):

$f("ipad", {'src': "flowplayer-3.2.7.swf", 'wmode': 'opaque'}, {
    clip: {
        url:url,
        autoPlay: true,
        live: true,
        provider: 'rtmp',
        scaling: 'orig',
        onStart: function() {
            authStream();
        }
    },
    plugins: {
        rtmp: {
            url: 'flowplayer.rtmp-3.2.3.swf',
            netConnectionUrl:'rtmp://server/live/_definst_/'
        }

    },  
    onLoad : function() {
        $f().play();
    }   
}).ipad();

user-initiated Play button not triggering the video to start automatically in iOS

1 Answers