Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video Page with Tracking</title>
</head>
<body>
    <video width="320" height="240" controls>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <video id="video2" width="320" height="240" controls>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <video id="video3" width="320" height="240" controls>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <video id="video4" width="320" height="240" controls>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <video id="video5" width="320" height="240" controls>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var divisor = 10;
            var videos_status = {};
        
            function eventHandler(e) {
                var videoId = $(this).attr('id');
                switch (e.type) {
                    case 'timeupdate':
                        videos_status[videoId].current = Math.round(this.currentTime);
                        var pct = Math.floor(100 * videos_status[videoId].current / this.duration);
                        for (var j in videos_status[videoId]._progress_markers) {
                            if (pct >= j && j > videos_status[videoId].greatest_marker) {
                                videos_status[videoId].greatest_marker = j;
                            }
                        }
                        if (videos_status[videoId].greatest_marker && !videos_status[videoId]._progress_markers[videos_status[videoId].greatest_marker]) {
                            videos_status[videoId]._progress_markers[videos_status[videoId].greatest_marker] = true;
                            console.log('From video Timeupdate (' + videoId + ') = ' + ' video_percent : ' + videos_status[videoId].greatest_marker);
                        }
                        break;
                    case 'play':
                        console.log('From video Play (' + videoId + ') =' + ' video_percent : ' + videos_status[videoId].greatest_marker);
                        break;
                    case 'pause':
                        if (videos_status[videoId].greatest_marker < '75') {
                        console.log('From video Pause (' + videoId + ') = ' + ' video_percent : ' + videos_status[videoId].greatest_marker);
                        }
                        break;
                    case 'ended':
                        console.log('From video End (' + videoId + ') = ' + ' video_percent : ' +videos_status[videoId].greatest_marker);
                        break;
                    default:
                        break;
                }
            }
            
            $('video').each(function() {
                var videoTagId = $(this).attr('id');
                if (!videoTagId) {
                    videoTagId = 'html5_video_' + Math.random().toString(36).slice(2);
                    $(this).attr('id', videoTagId);
                }
                
                videos_status[videoTagId] = {
                    greatest_marker: 0,
                    _progress_markers: {}
                };

                for (var j = 0; j < 100; j += divisor) {
                    videos_status[videoTagId]._progress_markers[j] = false;
                }
                
                videos_status[videoTagId].current = 0;
                $(this).on("play pause ended timeupdate", eventHandler);
            });
        });
    </script>
</body>
</html>
Editor is loading...