javascript - jquery插件，引用DOM中的视频元素

Question

我已经启动了 jQuery 插件，我想从绑定(bind)的 .on('click ', ) 事件。

我正在努力在我的 plugin.registerClick 函数中捕获这些信息，这是我的代码:

(function ($) {

$.myPlugin = function (element, options) {

    var defaults = {
            videoOnPage: 0,
            dataSource: 'data/jsonIntervals.txt',
            registerClick: function () { }
    }

    var plugin = this;

    plugin.settings = {}

    var $element = $(element);
         element = element;

    plugin.init = function () {

        plugin.settings = $.extend({}, defaults, options);

        $element.on('click', plugin.registerClick);

        getJsonIntervals();
    }

    plugin.registerClick = function () {

        var duration = $('video').get(plugin.settings.videoOnPage).duration;

        console.log('duration: ' + duration);
    }

    var startTimes = [];
    var dataSet = false;

    var getJsonIntervals = function () {

        if (dataSet == false) {
                //calls a $.getJSON method.
                //populates startTimes
                //updates dataSet = true;
        };
    }

    plugin.init();

}

$.fn.myPlugin = function (options) {
    return this.each(function () {
        if (undefined == $(this).data('myPlugin')) {
            var plugin = new $.myPlugin(this, options);
            $(this).data('myPlugin', plugin);
        }
    })
};

})(jQuery);

$(function () {
    $('#button1').myPlugin();
});

这是我的示例 jsFiddle Click Here

Answer 1

似乎对我有用:

plugin.registerClick = function () {
  var video = $('video').get(0);            
  console.log('duration: ' + video.duration);
  console.log('currenttime: ' + video.currentTime);
}

http://jsfiddle.net/p4w040uz/2/

您需要先播放视频，然后单击按钮。浏览器必须先检索元数据，然后才能返回元数据。

您可以阅读的其他引用资料:

http://www.w3schools.com/tags/av_event_loadedmetadata.asp

http://www.w3.org/2010/05/video/mediaevents.html