Как мне научить консоль Chrome находить мой объект и его методы?

Я использую js-интерфейс bitmovin API в своем приложении React. Я спотыкаюсь в консоли 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!

Источник

1 ответ

Решение

Прежде всего, я бы рекомендовал обновить ваше приложение, чтобы использовать Bitmovin Player версии 8 (https://bitmovin.com/docs/player/api-reference/web/web-sdk-api-reference-v8#/player/web/8 / документы / index.html). Вы ссылаетесь на документацию по версии 7, а версия 7 уже давно устарела и поэтому не разрабатывается и не поддерживается.

К вашей проблеме: как кто-то уже упоминал в комментариях, вы получаете доступ к HTMLVideoElementЭлемент DOM в ваших фрагментах кода, а не объект Bitmovin Player. В какой-то момент в вашем приложении вы создаете экземпляр Bitmovin Player, например:

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

Я бы рекомендовал сохранить этот экземпляр где-нибудь в вашем приложении, где вы можете получить к нему доступ (в моем примере с названием player). Этот объект содержит все методы API, которые вы можете вызывать и которые перечислены в общедоступной документации, указанной выше.

Обратите внимание, что container-id является контейнерным элементом (например, <div>), а не идентификатор <video> по умолчанию, поскольку видеоэлемент создается Bitmovin Player.

Источник
Другие вопросы по тегам