JSFiddle - React, Tailwind, and code Playground

HTML

<video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4?n=foo" type="video/mp4">

      <p>Your user agent does not support the HTML5 Video element.</p>
</video>
<video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4?n=bar" type="video/mp4">

      <p>Your user agent does not support the HTML5 Video element.</p>
</video>
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4?n=baz" type="video/mp4">

      <p>Your user agent does not support the HTML5 Video element.</p>
 </video>

JavaScript

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

   ...