为什么我在使用 videojs 时得到 NaN 作为视频持续时间

Why am I getting NaN as video duration while using videojs

我正在尝试获取 YouTube 视频的时长,我正在使用 videojs。

我的代码:

{% 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>

这是一个 Django 模板,所以我包含了这些标签。问题是每当我刷新页面时,持续时间值为 NaN。我看到 讨论建议使用下面的代码,但是当我更改代码时我什么也没得到。我做错了什么?

该讨论的代码

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

编辑:

我尝试删除 Youtube.js 和 Youtube.min.js。我得到这个错误

"No compatible source was found for this media."

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(), … }

console.log(myPlayer.readyState()) 的输出是“未定义”。我把它放在 var myPlayer = videojs('vid1');行。

readyState() 在那个时候返回 undefined。尝试 if (typeof myPlayer.readyState() === 'undefined' || myPlayer.readyState() < 1) {