HTML5 video: wrapping timeupdate event with loadedmetadata event

Question

I've created some code to pass back percentage of video watched metrics to an analytics platform. The code I have is working, but I'm having an issue with IE in that it will show both my duration and currentTime as NaN.

I found this stackoverflow post about loadedmetadataevent: Problem retrieving HTML5 video duration, but I'm having difficulty adding it to my code so that it will work correctly.

Question is: how do I wrap the timeupate event within a loadedmetadata event so that I can be certain that I have a value for duration when a user clicks the video?

In a lot of cases there are multiple videos on the page, so to help illustrate the problem, I've created a JSfiddle.

I've tried distilling down the entire code file into just the part that matters.

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

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

FULL CODE:

/*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);

score 0 · Accepted Answer · answered Apr 25 '15 at 18:54

Ended up doing something like this:

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 video: wrapping timeupdate event with loadedmetadata event

1 Answers1