新视频js播放器未加载

Question

我在React js应用程序中为videojs使用nuevo插件。我通过参考文档实现了代码。

问题是nuevoReady事件从未被触发，玩家来源也从未被设置。nuevoReady函数给出了一个回调函数，该函数内设置了播放器源。

如果我试图在nuevoReady事件之外设置源，那么我会得到以下错误

Uncaught TypeError: player.setSource is not a function

当我在控制台中记录播放器实例时，我发现没有可用的setSource功能

更新

正如@misterben所回答的那样，在nuevoReady事件之外初始化nuevo就成功了。但就在我无法通过程序更改播放器源代码之后。这样做会产生以下错误

_player.changeSource is not a function

玩家实例

any: ƒ any()
bigPlayButton: BigPlayButton {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_106', …}
boundApplyInitTime_: ƒ (e)
boundDocumentFullscreenChange_: ƒ (e)
boundFullWindowOnEscKey_: ƒ (e)
boundHandleTechClick_: ƒ (e)
boundHandleTechDoubleClick_: ƒ (e)
boundHandleTechTap_: ƒ (e)
boundHandleTechTouchEnd_: ƒ (e)
boundHandleTechTouchMove_: ƒ (e)
boundHandleTechTouchStart_: ƒ (e)
boundUpdateCurrentBreakpoint_: ƒ (e)
boundUpdateStyleEl_: ƒ (e)
breakpoint_: ""
breakpoints_: {tiny: 210, xsmall: 320, small: 425, medium: 768, large: 1440, …}
cache_: {currentTime: 0, initTime: 0, inactivityTimeout: 2000, duration: NaN, lastVolume: 1, …}
changingSrc_: false
childIndex_: null
childNameIndex_: null
children_: null
clearingTimersOnDispose_: false
controlBar: ControlBar {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_130', …}
controls_: true
debugEnabled_: false
el_: null
errorDisplay: ErrorDisplay {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_539', …}
eventBusEl_: null
eventedCallbacks: [ƒ]
fill_: false
fluid_: true
fsApi_: {prefixed: false, requestFullscreen: 'requestFullscreen', exitFullscreen: 'exitFullscreen', fullscreenElement: 'fullscreenElement', fullscreenEnabled: 'fullscreenEnabled', …}
hasStarted_: false
id_: "video-player"
isAudio_: false
isDisposed_: true
isFullscreen_: false
isPosterFromTech_: false
isReady_: true
language_: "en"
languages_: {en: {…}}
liveTracker: LiveTracker {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_118', …}
loadingSpinner: LoadingSpinner {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_101', …}
log: ƒ log()
mediaLoader: MediaLoader {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_6', …}
middleware_: []
name_: null
namedRafs_: Map(0) {size: 0}
off: ƒ off$1(targetOrType, typeOrListener, listener)
on: ƒ on()
one: ƒ one()
options_: {techOrder: Array(1), html5: {…}, inactivityTimeout: 2000, playbackRates: Array(0), liveui: false, …}
parentComponent_: null
playCallbacks_: []
playTerminatedQueue_: []
playerElIngest_: false
player_: null
posterImage: PosterImage {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_80', …}
poster_: ""
queuedCallbacks_: []
rafIds_: Set(0) {size: 0}
resizeManager: ResizeManager {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_565', …}
responsive_: false
scrubbing_: false
setIntervalIds_: Set(0) {size: 0}
setState: ƒ setState(stateUpdates)
setTimeoutIds_: Set(0) {size: 0}
state: {}
styleEl_: null
tag: null
tagAttributes: {playsinline: true, preload: 'auto', autoplay: true, controls: true, class: 'video-js vjs-fluid', …}
techName_: "Html5"
tech_: Html5 {player_: null, isDisposed_: true, parentComponent_: null, options_: null, id_: 'no_player_component_12', …}
textTrackDisplay: TextTrackDisplay {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_92', …}
textTrackSettings: TextTrackSettings {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_545', …}
trigger: ƒ trigger$1(event, hash)
userActive_: true
userActivity_: true
usingNativeControls_: false

我的代码

import React, {useState, useEffect, useRef} from 'react';
import videojs from "video.js";
import './resource/videojs.min.css';
const Player = ({options}) => {
const videoRef = React.useRef(null);
const playerRef = useRef(null);
useEffect(() => {
if (!playerRef.current) {
const videoElement = videoRef.current;
if (!videoElement) return;
const player = playerRef.current = videojs("video-player");
console.log("before on", player)
player.nuevo({shareMenu: false});
player.on('nuevoReady', function () {
player.setSource({
src: 'http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8',
type: 'application/x-mpegURL'
})
});
} else {
// you can update player here [update player through props]
const player = playerRef.current;
player.changeSource({
src: 'http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8',
type: 'application/x-mpegURL'
})
});
player.poster(options.poster);
player.currentTime(options.currentTime);
}
}, [options, videoRef])
// Dispose the Video.js player when the functional component unmounts
React.useEffect(() => {
const player = playerRef.current;
return () => {
if (player) {
player.dispose();
playerRef.current = null;
}
};
}, [playerRef]);
return (
<div>
<video
ref={videoRef}
id="video-player"
className="video-js vjs-fluid"
controls
autoPlay
preload="auto"
playsInline>
</video>
</div>
);
};
export default Player;

Answer 1

看起来您只是试图在事件侦听器上初始化插件(player.nuevo({shareMenu: false})(，以获取该插件将添加的事件。你会想让那句台词胜过听众。