0

我在我的 React 应用程序中使用 bitmovin API js。我在 Chrome 控制台中跌跌撞撞，试图在播放器对象上找到 API 的方法。

> document.getElementById('bitmovinplayer-video-feed-player')
<video id="bitmovinplayer-video-feed-player" preload="metadata" webkit-playsinline="" playsinline="" src="blob:https://app.totalvu.tv/7805d74c-053d-4484-8866-496ec30c2f2a"></video>

> Object.getPrototypeOf('bitmovin-video-feed-player')
String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}

当我打开原型字符串时，我看不到 API 方法。相反，我得到：

String {"", constructor: ƒ, anchor: ƒ, big: ƒ, blink: ƒ, …}
anchor: ƒ anchor()
at: ƒ (e)
big: ƒ big()
blink: ƒ blink()
arguments: (...)
caller: (...)
length: 0
name: "blink"
[[Prototype]]: ƒ ()
apply: ƒ apply()
arguments: (...)
bind: ƒ bind()
call: ƒ call()
caller: (...)
constructor: ƒ Function()
length: 0
name: ""
toString: ƒ ()
Symbol(Symbol.hasInstance): ƒ [Symbol.hasInstance]()
get arguments: ƒ ()
set arguments: ƒ ()
get caller: ƒ ()
set caller: ƒ ()
[[FunctionLocation]]: ​
[[Prototype]]: Object
[[Scopes]]: Scopes[0]
[[Scopes]]: Scopes[0]
bold: ƒ bold()
charAt: ƒ charAt()
charCodeAt: ƒ charCodeAt()
codePointAt: ƒ codePointAt()
concat: ƒ concat()
...

我希望找到此处列出的 play() rewind() getPlaybackSpeed() 等： https ://cdn.bitmovin.com/player/web/7/docs/interfaces/playerapi.playerapi-1.html

你能指导我如何导航 Chrome 控制台和 DOM 以找到播放器及其方法吗？

PS旧帖子列出了各种各样的东西，例如：

> console.dir('bitmovin-video-feed-player')
undefined
> console.log(bitmovin-video-feed-player)
VM2946850:1 Uncaught ReferenceError: video is not defined
    at <anonymous>:1:22
(anonymous) @ VM2946850:1
> console.log('bitmovin-video-feed-player')
undefined
> dir(window)
undefined
> document.getElementsByTagName('video')
HTMLCollection [video#bitmovinplayer-video-feed-player, bitmovinplayer-video-feed-player: video#bitmovinplayer-video-feed-player]
0: video#bitmovinplayer-video-feed-player
length: 1
bitmovinplayer-video-feed-player: video#bitmovinplayer-video-feed-player
[[Prototype]]: HTMLCollection
item: ƒ item()
length: (...)
namedItem: ƒ namedItem()
arguments: (...)
caller: (...)
length: 1
name: "namedItem"
[[Prototype]]: ƒ ()
[[Scopes]]: Scopes[0]
constructor: ƒ HTMLCollection()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.toStringTag): "HTMLCollection"
get length: ƒ length()

最后，使用 React chrome 插件，我可以通过这种方式找到方法（我使用 'v' 作为扩展列表图标）

v t key="feed-player"
(right hand side) props

v mainVideo: {isMuted: false, mainPlayerInstance: {…}, playEvent…}
    v mainPlayerInstance: {_reactInternalFiber: {…}, changeVideoQuality: ƒ bo…}
        v playerInstance: {DRM: {…}, EVENT: {…}, EVENTS: Array(83), LOGLEVEL:…}
...
addEventHandler:ƒ () {}
addMetadata:ƒ () {}
addSubtitle:ƒ () {}
castStop:ƒ () {}
castVideo:ƒ () {}
clearQueryParameters:ƒ () {}
destroy:ƒ () {}
enterFullscreen:ƒ () {}
enterPictureInPicture:ƒ () {}
exitFullscreen:ƒ () {}
exitPictureInPicture:ƒ () {}
fireEvent:ƒ () {}
getAudio:ƒ () {}
getAudioBufferLength:ƒ () {}
getAudioQuality:

我需要帮助了解如何在我的 JS 代码中对正确的对象调用这些方法之一。组件中的“feed-player”似乎与 bitmovin-video-feed-player 无关。必须有一种方法可以链接到类似的东西：

bitmovin.video-feed-player.feed-player.mainVideo.mainPlayerInstance.playerinstance.castVidoeo()

例如。

非常感谢 Chrome 控制台 Jedi 帮助我！

4

1 回答 1

1

首先，我建议您升级您的应用以使用 Bitmovin Player 版本 8 ( https://bitmovin.com/docs/player/api-reference/web/web-sdk-api-reference-v8#/player/web/ 8/docs/index.html )。您正在参考 v7 文档，并且 v7 已经被弃用了很长一段时间，因此没有进一步开发或维护。

对于您的问题：正如评论中已经提到的那样，您正在访问HTMLVideoElement代码片段中的 DOM 元素，而不是 Bitmovin Player 对象。在您的应用程序的某个时刻，您正在创建一个 Bitmovin Player 实例，如下所示：

const player = new Player(document.getElementById('container-id'), config);

我建议将该实例存储在您的应用程序中您可以访问它的某个位置（在我的示例中称为player）。此对象包含您可以调用的所有 API 方法，这些方法列在上面链接的公共文档中。

请注意，这container-id是一个容器元素（如 a <div>），而不是<video>默认标签的 id，因为视频元素是由 Bitmovin 播放器创建的。

于 2021-11-05T11:58:18.647 回答