用户启动的播放按钮不会触发视频在iOS中自动启动

时间:2012-02-03 06:40:49

标签: jquery ios ipad html5 flowplayer

我正在使用流动播放器在桌面和触摸设备上播放实时视频我正在使用流媒体播放器的ipad插件在HTML5视频播放器中播放视频。以下是我正在做的玩家的工作流程:

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

}

现在问题是视频的自动播放在ios(ipad,iphone)中无效。我知道这些设备默认禁止自动播放。为此,我使用$f().play();来触发自动播放。我尝试了几种使用它的方法,但无法使其工作。我找到的唯一可行方法是,当我在authStream function中拨打$(document).ready(),然后在$f().play();中使用$('#button1').click()播放视频,而无需再次点击播放视频在ipad。我想做同样的工作,但不想在authStream function中致电$(document).ready()。我想做一些类似于我在示例代码中尝试的方式,并且还希望在点击按钮时自动播放视频,而无需在ipad中第二次单击。现在我需要点击两次才能在触摸设备中播放视频。请有人建议我可以尝试使用ios(ipad)方法的方法。

编辑:似乎ipad html5播放器中的播放控件没有被触发。有没有办法通过点击#button1来触发html5播放器的播放按钮。我没有想到让它发挥作用。

1 个答案:

答案 0 :(得分:0)

我从来没有尝试过在iOS上使用Flowplayer(我只使用纯HTML5播放器),但我的意思是,内置播放器仅在播放事件是用户触发时启动。似乎没有办法获得真正的自动播放功能。

编辑: 如果要在点击播放按钮上发送Ajax请求,请尝试从onStart事件(documentation)调用authStream方法:

$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();