HTML5 视频：用 loadmetadata 事件包装 timeupdate 事件

Question

我创建了一些代码来将观看视频的百分比指标传递回分析平台。我的代码正在运行，但我遇到了 IE 问题，因为它将我的持续时间和 currentTime 都显示为NaN。

我发现这篇关于 loadedmetadataevent:Problem retrieving HTML5 video duration 的 stackoverflow 帖子，但我很难将它添加到我的代码中以使其正常工作。

问题是：如何将timeupate 事件封装在loadedmetadata 事件中，以便确定用户点击视频时的持续时间值？

在很多情况下，页面上有多个视频，因此为了帮助说明问题，我创建了一个JSfiddle。

我尝试将整个代码文件提炼成重要的部分。

jQuery('video').each(function () {
    var $video = jQuery(this);

        $video.on('timeupdate', function (event) {
            console.log(event.target.duration);
            console.log(event.target.currentTime);
        });
});

完整代码：

/*jslint browser:true*/
var $videos = jQuery('video'),

_ = {
    getParamFromInputLink: function (inputLink, param) {
        var match = (new RegExp("[?\\x26]" + param + "\\x3d([^\\x26]*)")).exec(inputLink);

        return match && decodeURIComponent(match[1].replace(/\+/g, " "));
    },

    getVideo: function () {
        var videoSource = this.attr('src') || this.children().first().attr('src'),
            videoName = _.getParamFromInputLink(videoSource, 'n').split('.')[0].replace(/-/g, ' ').toLowerCase() || document.title;

        return {
            name: videoName
        };
    },

    getInteractionType: function (percentWatched) {
        return {
            '0%': '100',
            '25%': '101',
            '50%': '101',
            '75%': '101',
            '100%': '103'
        }[percentWatched];
    },

    onTimeUpdate: function (event) {
        var lastPercentageWatched = event.data.lastPercentageWatched,
            videoTitle = event.data.videoName,
            currentTime = event.target.currentTime,
            duration = event.target.duration,
            videoRemaining = duration - currentTime,
            videoCompletedBuffer = duration * 0.05,
            videoHasCompleted = 1,
            currentVideoPercentage = (Math.floor(currentTime / duration * 4) / 4).toFixed(2),
            percentOfVideoWatched = videoRemaining <= videoCompletedBuffer ? videoHasCompleted : currentVideoPercentage,
            percentOfVideoWatchedCombined,
            InteractionType;

        if (!lastPercentageWatched || percentOfVideoWatched > event.data.lastPercentageWatched) {

            percentOfVideoWatchedCombined = percentOfVideoWatched * 100 + '%';
            event.data.lastPercentageWatched = percentOfVideoWatched;
            InteractionType = _.getInteractionType(percentOfVideoWatchedCombined);

            console.log({
                'title': videoTitle,
                'type': 'video',
                'completionrate': percentOfVideoWatchedCombined,
                'video.length': duration,
                'interactiontype': InteractionType
            });

        }
    }
},

trackVideo = function () {
    var $video = jQuery(this),
        videoInfo = _.getVideo.call($video);


    $video.on('timeupdate', {
        videoName: videoInfo.name,
        lastPercentageWatched: false
    }, _.onTimeUpdate);

};

/* init */

$videos.each(trackVideo);

Answer 1

最终做了这样的事情：

jQuery('video').each(function () {
    var $video = jQuery(this),
        videoDuration;

    $video.on('loadedmetadata', function(event) {
        videoDuration = event.target.duration;

        $video.off('loadedmetadata');

        $video.on('timeupdate', {
            videoDuration: videoDuration
        },function (event) {
             // access duration like event.data.videoDuration   
        });      
    });

});