我正在嘗試獲取 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", onl oadedMetadata);
}
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。我收到這個錯誤
“沒有找到此媒體的兼容來源。”
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" hljs-string">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" hljs-string">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 >
?
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'); 之后 線。
uj5u.com熱心網友回復：
readyState()正在回傳undefined那個點。嘗試if (typeof myPlayer.readyState() === 'undefined' || myPlayer.readyState() < 1) {
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/359061.html
標籤：javascript html 视频.js
上一篇：瀏覽器視窗關閉后Html和javascriptcookie消失
下一篇：計算空屬性值