如何在wordpress

时间:2015-07-09 14:36:29

标签: javascript wordpress

我有一个Wordpress网站。我想在每个视频上设置十秒倒计时,但我不知道如何设置功能:

JSFiddle

(function ($, window, document, undefined) {
    var pluginName = 'preRoll',
        defaults = {
            pre: 'PreRoll HTML Code',
            post: 'PostRoll HTML Code',
            timer: 15
        };
    function Plugin(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }
    Plugin.prototype = {
        init: function() {
            var player = $(this.element),
                message = player.text().split(/\[(.+)\]/),
                timer = this.options.timer,
                pre = this.options.pre,
                post = this.options.post;
            if (message[1] !== 'x')
            {
                timer = message[1];
            }
            player.html('<div id="preRoll_timer">' + message[0] + timer + message[2] + '</div>' + pre);
            setTimeout(function() {
                player.html(function() {
                    return post;
                });
            }, (timer * 1000));
            setInterval(function() {
                timer = (timer - 1);
                $('div#preRoll_timer').html(message[0] + timer + message[2]);
            }, 1000);
        },
    };
    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
        });
    };
})(jQuery, window, document);

$('#player').preRoll({
    timer: 10,
    pre: '<img src="http://placehold.it/500x400" />',
    post: '<iframe width="500" height="400" src="http://www.youtube.com/embed/4Ti70Uidal4"></iframe>'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="player">Your video will start playing in [x] seconds.</div>

0 个答案:

没有答案