Question

我创建了一些代码，将视频观看指标的百分比传回分析平台。我的代码正在运行，但我遇到了IE的问题，因为它会将我的持续时间和当前时间显示为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   
        });      
    });

});

HTML5视频：使用loadedmetadata事件包装timeupdate事件

1 个答案: