1 Replies - 120 Views - Last Post: 28 May 2019 - 10:15 AM

#1 BenignDesign   User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 7985
  • View blog
  • Posts: 12,406
  • Joined: 28-September 07

VideoJS requiring multiple refreshes to load data

Posted 28 May 2019 - 05:38 AM

I'm using VideoJS to build a video player (which works beautifully), however, I need the duration and the current time to load into form fields to be sent to a database.

It works, but only after multiple refreshes.

On the initial page load, it reads:

Quote

Current video location: 0
Total video duration: NaN


After the first refresh, it reads:

Quote

Current video location: undefined
Total video duration: undefined


After the SECOND refresh, it displays the actual duration and current time data.

The generated code (this is done in Visual Studio using MVC. I can separate this out into the individual pages if need be, but the javascript is the issue here.
<!DOCTYPE html>
<html>
<head>
   <script src="https://cdn.jsdelivr.net/npm/videojs-seek-buttons/dist/videojs-seek-buttons.min.js"></script>
    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/video.js/dist/video-js.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/videojs-seek-buttons/dist/videojs-seek-buttons.css" />

    <script>
        var videojs = require('video.js');
        require('videojs-seek-buttons');

        var player = videojs('my_video', {
            controlBar: { muteToggle: true }
        });
    </script>
    
    <style type="text/css">
        #instructions {
            max-width: 640px;
            text-align: left;
        }

            #instructions textarea {
                width: 100%;
                height: 100px;
            }

        /* Show the controls (hidden at the start by default) */
        .video-js .vjs-control-bar {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

        .video-js .vjs-time-control {
            display: block;
        }

        .video-js .vjs-remaining-time {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container body-content">
        

<br /><br />
<div class="row">
    <div id="instructions">
        <video id="my_video" class="video-js vjs-default-skin" width="640" height="267"
               poster='https://video-js.zencoder.com/oceans-clip.jpg'
               data-setup='{ "aspectRatio":"640:267", "playbackRates": [0.5, 1, 2], "controls":true, "preload":"auto", "autoplay":false, "inactivityTimeout":0 }'>

            <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
            <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
            <source src="https://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />
            <p>Your browser does not support HTML5 video.</p>
        </video>
    </div>
</div>


<div class="row" style="margin-top:25px;">
    <label>Current video location: </label> <input type="text" id="watched_value" value="" disabled /><br />
    <label>Total video duration: </label> <input type="text" id="total_duration" value="" disabled />
</div>
<script>
    var x = document.getElementById("my_video");
    function setValue(id, newvalue) {
        var s = document.getElementById(id);
        s.value = newvalue;
    }
    function setTotal(id, newvalue) {
        var t = document.getElementById(id);
        t.value = newvalue;
    }
    function getCurTime() {
        setValue("watched_value", x.currentTime);
    }
    function getTotTime() {
        setValue("total_duration", x.duration);
    }
    getCurTime();
    getTotTime();
</script>

    </div>

    
        <script src="/lib/jquery/dist/jquery.js"></script>
        <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/js/site.js?v=ji3-IxbEzYWjzzLCGkF1KDjrT2jLbbrSYXw-AhMPNIA"></script>
    
    <script>
        $(function () {

            // Stop if HTML5 video isn't supported
            if (!document.createElement('video').canPlayType) {
                $("#video_controls").hide();
                return;
            }

            var video = document.getElementById("my_video");

            // Play/Pause ============================//
            $("#play_button").bind("click", function () {
                video.play();
            });

            $("#pause_button").bind("click", function () {
                video.pause();
            });

            $("#play_toggle").bind("click", function () {
                if (video.paused) {
                    video.play();
                    $(this).html("Pause");
                } else {
                    video.pause();
                    $(this).html("Play");
                }
            });

            // Play Progress ============================//
            $(video).bind("timeupdate", function () {
                var timePercent = (this.currentTime / this.duration) * 100;
                $("#play_progress").css({ width: timePercent + "%" })
            });

            // Load Progress ============================//
            $(video).bind("progress", function () {
                updateLoadProgress();
            });
            $(video).bind("loadeddata", function () {
                updateLoadProgress();
            });
            $(video).bind("canplaythrough", function () {
                updateLoadProgress();
            });
            $(video).bind("playing", function () {
                updateLoadProgress();
            });

            function updateLoadProgress() {
                if (video.buffered.length > 0) {
                    var percent = (video.buffered.end(0) / video.duration) * 100;
                    $("#load_progress").css({ width: percent + "%" })
                }
            }

            // Time Display =============================//
            $(video).bind("timeupdate", function () {
                $("#current_time").html(formatTime(this.currentTime));
                var watched = formatTime(this.currentTime);
                $("#watched_value").val(watched);
            });
            $(video).bind("durationchange", function () {
                $("#duration").html(formatTime(this.duration));
            });

            function formatTime(seconds) {
                var seconds = Math.round(seconds);
                var minutes = Math.floor(seconds / 60);
                // Remaining seconds
                seconds = Math.floor(seconds % 60);
                // Add leading Zeros
                minutes = (minutes >= 10) ? minutes : "0" + minutes;
                seconds = (seconds >= 10) ? seconds : "0" + seconds;
                return minutes + ":" + seconds;
            }

        });

    </script>
    <script>
        $(function () {
            var $refreshButton = $('#refresh');
            var $results = $('#css_result');

            function refresh() {
                var css = $('style.cp-pen-styles').text();
                $results.html(css);
            }

            refresh();
            $refreshButton.click(refresh);

            // Select all the contents when clicked
            $results.click(function () {
                $(this).select();
            });
        });
    </script>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: VideoJS requiring multiple refreshes to load data

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2334
  • View blog
  • Posts: 7,113
  • Joined: 15-January 14

Re: VideoJS requiring multiple refreshes to load data

Posted 28 May 2019 - 10:15 AM

It's probably doing that because the video doesn't get downloaded fully until you refresh once or twice, it's just the time to download it. Put the functions to get the time in an event handler for after the video is loaded. It might not be able to get the total time unless the entire video is downloaded.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1