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

jquery plugin, reference video element in DOM

本文关键字：的视频 元素 DOM 引用 插件 jquery      更新时间：2023-09-26

我已经启动了jQuery插件，我想从绑定的.on('click', )事件中检索HTML5视频上的.duration和.currentTime。

我正在努力在我的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点击这里

似乎对我有用：

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

相关文章：