为什么我在使用 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) {
我正在尝试获取 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) {