在jplayer android修复中启用自动播放

时间:2014-12-18 07:38:32

标签: jquery jplayer

我使用以下代码实现了在我的网站上播放音频的jplayer

$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
    $(this).jPlayer("setMedia", {
        title: "Bubble",
        m4a: "http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
        oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
    }).jPlayer("play");
},
swfPath: "js",
supplied: "m4a, oga",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
});

使用此设备,一旦加载了网站,jplayer就会自动播放。但上述代码无法在移动设备上运行。所以我将我的代码更改为jplayer提供的jplayer android修复代码。现在jplayer在移动设备上运行,但是一旦加载了网站,我就无法自动播放。

Jplayer Fix

var jPlayerAndroidFix = (function($) {
var fix = function(id, media, options) {
    this.playFix = false;
    this.init(id, media, options);
};
fix.prototype = {
    init: function(id, media, options) {
        var self = this;

        // Store the params
        this.id = id;
        this.media = media;
        this.options = options;

        // Make a jQuery selector of the id, for use by the jPlayer instance.
        this.player = $(this.id);

        // Make the ready event to set the media to initiate.
        this.player.bind($.jPlayer.event.ready, function(event) {
            // Use this fix's setMedia() method.
            self.setMedia(self.media);
        });

        // Apply Android fixes
        if($.jPlayer.platform.android) {

            // Fix playing new media immediately after setMedia.
            this.player.bind($.jPlayer.event.progress, function(event) {
                if(self.playFixRequired) {
                    self.playFixRequired = false;

                    // Enable the contols again
                    // self.player.jPlayer('option', 'cssSelectorAncestor', self.cssSelectorAncestor);

                    // Play if required, otherwise it will wait for the normal GUI input.
                    if(self.playFix) {
                        self.playFix = false;
                        $(this).jPlayer("play");
                    }
                }
            });
            // Fix missing ended events.
            this.player.bind($.jPlayer.event.ended, function(event) {
                if(self.endedFix) {
                    self.endedFix = false;
                    setTimeout(function() {
                        self.setMedia(self.media);
                    },0);
                    // what if it was looping?
                }
            });
            this.player.bind($.jPlayer.event.pause, function(event) {
                if(self.endedFix) {
                    var remaining = event.jPlayer.status.duration - event.jPlayer.status.currentTime;
                    if(event.jPlayer.status.currentTime === 0 || remaining < 1) {
                        // Trigger the ended event from inside jplayer instance.
                        setTimeout(function() {
                            self.jPlayer._trigger($.jPlayer.event.ended);
                        },0);
                    }
                }
            });
        }

        // Instance jPlayer
        this.player.jPlayer(this.options);

        // Store a local copy of the jPlayer instance's object
        this.jPlayer = this.player.data('jPlayer');

        // Store the real cssSelectorAncestor being used.
        this.cssSelectorAncestor = this.player.jPlayer('option', 'cssSelectorAncestor');

        // Apply Android fixes
        this.resetAndroid();

        return this;
    },
    setMedia: function(media) {
        this.media = media;

        // Apply Android fixes
        this.resetAndroid();

        // Set the media
        this.player.jPlayer("setMedia", this.media);
        return this;
    },
    play: function() {
        // Apply Android fixes
        if($.jPlayer.platform.android && this.playFixRequired) {
            // Apply Android play fix, if it is required.
            this.playFix = true;
        } else {
            // Other browsers play it, as does Android if the fix is no longer required.
            this.player.jPlayer("play");
        }
    },
    resetAndroid: function() {
        // Apply Android fixes
        if($.jPlayer.platform.android) {
            this.playFix = false;
            this.playFixRequired = true;
            this.endedFix = true;
            // Disable the controls
            // this.player.jPlayer('option', 'cssSelectorAncestor', '#NeverFoundDisabled');
        }
    }
};
return fix;
})(jQuery);

$(document).ready(function() {

var id = "#jquery_jplayer_1";

var bubble = {
    title:"Bubble",
    mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
    oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
};

var options = {
    swfPath: "../dist/jplayer",
    supplied: "mp3,oga",
    wmode: "window",
    useStateClassSkin: true,
    autoBlur: false,
    smoothPlayBar: true,
    keyEnabled: true,
    remainingDuration: true,
    toggleDuration: true
};

var myAndroidFix = new jPlayerAndroidFix(id, bubble, options);

$("#jplayer_inspector").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
});

0 个答案:

没有答案