How do I learn the Chrome console to find my object and its methods?

Question

I'm using the bitmovin API js in my React app. I'm stumbling around in the Chrome console to try and find the methods of the API on the player object.

> 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: ƒ, …}

When I open the Prototype String, I don't see the API methods. Instead I get:

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()
...

I was hoping to find play() rewind() getPlaybackSpeed() etc as listed here: https://cdn.bitmovin.com/player/web/7/docs/interfaces/playerapi.playerapi-1.html

Can you guide me how to navigate the Chrome console and the DOM to find the player and its methods ?

PS old posts have listed all kinds of things like:

> 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()

Finally, using the React chrome plugins, I can find the methods this way (I'm using 'v' for the expanded lists icon)

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:

I need help understanding how to invoke one of these methods on the proper object, in my JS code. "feed-player" in the components doesn't seem related to the bitmovin-video-feed-player. There must be a way to chain from something like :

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

for example.

Greatly appreciate the Chrome console Jedi helping me out!

Answer 1

First of all I'd recommend upgrading your app to use Bitmovin Player version 8 (https://bitmovin.com/docs/player/api-reference/web/web-sdk-api-reference-v8#/player/web/8/docs/index.html). You're referencing v7 documentation and v7 is deprecated for quite a while now, thus not further developed or maintained.

To your problem: As someone already mentioned in the comments, you are accessing the HTMLVideoElement DOM element in your code snippets, and not the Bitmovin Player object. At some point in your app you are creating a Bitmovin Player instance, like this:

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

I'd recommend storing that instance somewhere in your app where you can access it (in my example called player). This object contains all the API methods that you can call and that are listed in the public documentation linked above.

Please note that container-id is a container element (like a <div>) and not the id of the <video> tag per default, as the video element is created by the Bitmovin Player.