Why am I getting NaN as video duration while using videojs

I am trying to get the duration of a youtube video, I'm using videojs.

My Code:

{% load static %}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/media/css/style.css">    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">    <!-- Video.js -->
    <link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
    <!-- Sea Theme -->
    <link href="https://unpkg.com/@videojs/themes@1/dist/sea/index.css" rel="stylesheet">  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
</head>
<body>
  <video
    id="vid1"
    class="video-js vjs-default-skin"
    controls
    autoplay
    width="640" height="264"
    data-setup='{ "techOrder": ["youtube", "html5"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ#.mp4"}] }'
  >
  </video>
  
  <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
  <script src="{% static '/js/Youtube.js' %}"></script>
  <script src="{% static '/js/Youtube.min.js' %}"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

  <script type="text/javascript">
    var myPlayer = videojs('vid1');

    if (myPlayer.readyState() < 1) {
        // wait for loadedmetdata event
        myPlayer.one("loadedmetadata", onLoadedMetadata);
    }
    else {
        // metadata already loaded
        onLoadedMetadata();
    }
    
    function onLoadedMetadata() {
        alert(myPlayer.duration());
        $('#duration').html("Duration: " + myPlayer.duration());
    }
</script>

</body>
</html>

This is a Django template so I included those tags. The issue is that whenever I refresh the page The duration value is NaN. I saw this discussion that suggests using the code below but I get exactly nothing when I change the code. What am I doing wrong?

Code from that discussion

var myVideo = document.getElementById("videoPlayerNew");
myVideo.onloadedmetadata = function() {
  console.log('metadata loaded!');
  console.log(this.duration);//this refers to myVideo
};

EDIT:

I tried removing Youtube.js and Youtube.min.js. I get this error

"No compatible source was found for this media."

The output of console.log(myPlayer)

Object { player_: {…}, isDisposed_: false, parentComponent_: null, options_: {…}, id_: "vid1", name_: null, state: {}, setState: setState(e)
, children_: (11) […], childIndex_: {…}, … }

any: function any()
audioTracks_: Object { tracks_: [], changing_: false, addEventListener: on(e, t)
, … }

bigPlayButton: Object { isDisposed_: false, id_: "vid1_component_39", name_: "BigPlayButton", … }

boundApplyInitTime_: function boundApplyInitTime_(e)
boundDocumentFullscreenChange_: function (e)
boundFullWindowOnEscKey_: function boundFullWindowOnEscKey_(e)
boundHandleTechClick_: function boundHandleTechClick_(e)
boundHandleTechDoubleClick_: function boundHandleTechDoubleClick_(e)
boundHandleTechTap_: function boundHandleTechTap_(e)
boundHandleTechTouchEnd_: function boundHandleTechTouchEnd_(e)
boundHandleTechTouchMove_: function boundHandleTechTouchMove_(e)
boundHandleTechTouchStart_: function boundHandleTechTouchStart_(e)
boundUpdateCurrentBreakpoint_: function boundUpdateCurrentBreakpoint_(e)
boundUpdateStyleEl_: function boundUpdateStyleEl_(e)

breakpoint_: ""

breakpoints_: Object { tiny: 210, xsmall: 320, small: 425, … }

cache_: Object { currentTime: 0, initTime: 0, inactivityTimeout: 2000, … }

changingSrc_: false

childIndex_: Object { vid1_component_5: {…}, vid1_component_13: {…}, vid1_component_25: {…}, … }

childNameIndex_: Object { MediaLoader: {…}, mediaLoader: {…}, PosterImage: {…}, … }

children_: Array(11) [ video#vid1_html5_api.vjs-tech, {…}, {…}, … ]

clearingTimersOnDispose_: true

controlBar: Object { isDisposed_: false, id_: "vid1_component_63", name_: "ControlBar", … }

controls_: true

debugEnabled_: false

el_: <div id="vid1" class="video-js vjs-default-ski…vjs-youtube vjs-waiting" data-setup="{ \"techOrder\": [\"yout…v=xjS6SftYQaQ#.mp4\"}] }" autoplay="true" tabindex="-1" translate="no" role="region" aria-label="Video Player" lang="en-us">
errorDisplay: Object { isDisposed_: false, id_: "vid1_component_458", name_: "ErrorDisplay", … }

error_: null

eventBusEl_: <div id="vid1" class="video-js vjs-default-ski…vjs-youtube vjs-waiting" data-setup="{ \"techOrder\": [\"yout…v=xjS6SftYQaQ#.mp4\"}] }" autoplay="true" tabindex="-1" translate="no" role="region" aria-label="Video Player" lang="en-us">

fill_: false

fluid_: false

fsApi_: Object { prefixed: false, requestFullscreen: "requestFullscreen", exitFullscreen: "exitFullscreen", … }

hasStarted_: false

height_: 264

id_: "vid1"

isAudio_: false

isDisposed_: false

isFullscreen_: false

isPosterFromTech_: true

isReady_: true

language_: "en-us"

languages_: Object { en: {…} }

liveTracker: Object { isDisposed_: false, id_: "vid1_component_51", name_: "LiveTracker", … }

loadingSpinner: Object { isDisposed_: false, id_: "vid1_component_34", name_: "LoadingSpinner", … }

log: function n()
mediaLoader: Object { isDisposed_: false, id_: "vid1_component_5", name_: "MediaLoader", … }

middleware_: Array []

name_: null

namedRafs_: Map(0)

off: function off(e, t, i)
on: function on()
one: function one()
options_: Object { inactivityTimeout: 2000, liveui: false, language: "en-US", … }

parentComponent_: null

playCallbacks_: Array []

playTerminatedQueue_: Array []

playerElIngest_: false

player_: Object { player_: {…}, isDisposed_: false, id_: "vid1", … }

posterImage: Object { isDisposed_: false, id_: "vid1_component_13", name_: "PosterImage", … }

poster_: "https://img.youtube.com/vi/xjS6SftYQaQ/maxresdefault.jpg"

queuedCallbacks_: Array []

rafIds_: Set []

readyQueue_: Array []

resizeManager: Object { isDisposed_: false, id_: "vid1_component_484", name_: "ResizeManager", … }

responsive_: false

scrubbing_: false

setIntervalIds_: Set []

setState: function setState(e)
setTimeoutIds_: Set []

state: Object {  }

styleEl_: <style class="vjs-styles-dimensions">

tag: null

tagAttributes: Object { height: "264", width: "640", "data-setup": "{ \"techOrder\": [\"youtube\", \"html5\"], \"sources\": [{ \"type\": \"video/youtube\", \"src\": \"https://www.youtube.com/watch?v=xjS6SftYQaQ#.mp4\"}] }", … }

techName_: "Youtube"

tech_: Object { isDisposed_: false, id_: "no_player_component_493", name_: "constructor", … }

textTrackDisplay: Object { isDisposed_: false, id_: "vid1_component_25", name_: "TextTrackDisplay", … }

textTrackSettings: Object { isDisposed_: false, id_: "vid1_component_464", name_: "TextTrackSettings", … }

textTracks_: Object { tracks_: [], addEventListener: on(e, t)
, … }

trigger: function trigger(e, t)

userActive_: true

userActivity_: true

width_: 640

<prototype>: Object { constructor: o(e, t, i), dispose: dispose(), createEl: createEl(), … }

The output of console.log(myPlayer.readyState()) is "undefined". I put it right after the var myPlayer = videojs('vid1'); line.

Solution

readyState() is returning undefined at that point. Try if (typeof myPlayer.readyState() === 'undefined' || myPlayer.readyState() < 1) {