Как получить события VK.VideoPlayer используя JS?

Question

[Nicesoft]

Да, есть эта ссылка, но понять что там написано не получается - там как курица лапой написано: теги не закрыты, параметр вызова VK.VideoPlayer не объяснен ...

У меня есть трансляции, они видны на страничке, тут нет проблем, мне нужно отследить запуск и остановку этой трансляции:

<iframe
            id="strm"
            src="https://live.vkvideo.ru/app/embed/kotik?autoplay=true&js_api=1"
            allow="autoplay;encrypted-media;fullscreen;picture-in-picture"
            allowfullscreen>
</iframe>
<script src="https://vk.com/js/api/videoplayer.js"></script>

Уперся в инициализацию, при попытках:
const player = VK.VideoPlayer("strm");
или
const player = VK.VideoPlayer(document.querySelector("#strm"));
получаю
Uncaught Error: iframe src is not a VK embed

Так, ну оказалось, что видео должно быть загружено, с трансляциями это не работает...
А вот в Твиче было возможно создать плеер и следить за его состоянием....

Answer 1

[Rsa97]

Вы путаете видео со стримом.
Для стримов API другое.
Размещаем iframe со стримом

<iframe
  src="https://live.vkvideo.ru/app/embed/denzito?autoplay=true"
  width="800"
  height="450"
  frameborder="0"
  allowfullscreen
></iframe>

Вешаем слушатель событий

<script>
const stream = document.querySelector('iframe');
window.addEventListener(
  'message',
  (m) => { 
    if (m.source !== stream.contentWindow) {
      return;
    }
    console.log(m.data);
  },
);
</script>

Ну а дальше смотрим в логах, какие события приходят от стрима (m.data). Там будут, например,

"embed-play"
{ event: "started", duration: 0, time: 0 }
{ event: "volumechange", volume: 1, mute: false }
"embed-pause"
{ event: "paused", time: 0 }

Ну и можно отправлять сообщения стриму через stream.contentWindow.postMessage</stream>;