我有一个Wordpress网站。我想在每个视频上设置十秒倒计时,但我不知道如何设置功能:
(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>