How to tell video dock component that video is playing so it goes to dock position?

[strix25]

Does anyone know how to tell video dock component from video player component IFRAME that video is playing and that it can undock when it goes out of the viewport ?

For example how to fire postMessage that the component will be able to recieve it? (Just example amphtml\extensions\amp-jwplayer\0.1\amp-jwplayer.js)

Would it be in this case something like this?

 postMessage({
  type: 'play',
  detail: 'test'
}, window);

So I am building a new video player, that will be able to dock. For example like these:
amp-brid-player
amp-brightcove
amp-dailymotion
amp-delight-player
amp-ima-video
amp-jwplayer
amp-video
amp-video-iframe
amp-youtube

1. How can I tell from my video player iframe to the dock component that my video is playing and that it can dock
2. is it neccesery to have this request to our server that returns HTML and player inside it,
   or can I just build inframe on client side and load my player that way?

[dethstrobe]

@alanorozco

[strix25]

@danielrozenberg do you maybe know how this works ? :) any help would be really appreciated.

Sorry for tagging you, but saw that you wrote some of the code for the docking functionality of amp component

[danielrozenberg]

I haven't, actually. I believe Alan would be best position to talk about this. Let's wait for him to respond

[rsimha]

Thanks for your question @strix25. Our documentation for how to implement video docking can be found at https://github.com/ampproject/amphtml/blob/main/extensions/amp-video-docking/amp-video-docking.md. It mentions the dock attribute, which can be used to communicate to the component that a video must be docked when the viewport scrolls past the video. However, I'm not sure if this is designed to work for videos in iframes.

Tagging @alanorozco and @jridgewell, who should know mode about this.

/cc @damjan25

[alanorozco]

How can I tell from my video player iframe to the dock component that my video is playing and that it can dock

1. Every component implementation dispatches a play event. Autoplay doesn't allow docking, so make sure that you're dispatching mute and unmute correctly as well.

2. The component doesn't define whether a video docks, the author does by specifying the dock attribute.

However, it's best if you avoid all this and use amp-video-iframe instead. There are recommendations on using it as a vendor

[strix25]

1. That's what I need help with, how to dispatch mute, unmute, pause, play,... events ? For example how do players like jwplayer, amp-delight-player, amp-dailymotion,... dispatch this event ? I have my player click to play, added this DOCK attribute but now I am just missing this how to dispatch events
2. Hmm I specified this dock attribute

<amp-vlyby-player
        data-content-id="-LLoCCZqWi18O73b6M0w"
        layout="responsive"
        dock
        width="16"
        height="9"
        data-media-id="BZ6tc0gy"
        data-player-id="uoIbMPm3"
        data-publisherid="f363eb2b75459b34592cc4"
        data-placementid="default"
        data-pubref="test.amp.com
       ></amp-vlyby-player>

I have in place listener that would then redispatch these events but I cant trigger it :/

amphtml/extensions/amp-vlyby-player/0.1/amp-vlyby.player.js : onMessage_()

  onMessage_(messageEvent) {
    console.log(messageEvent); //how to fire postMessage() from video iframe to log it here?
    if (
      !this.iframe_ ||
      !messageEvent ||
      messageEvent.source != this.iframe_.contentWindow
    ) {
      return;
    }

    const messageData = getData(messageEvent);
    if (!isJsonOrObj(messageData)) {
      return;
    }

    const data = objOrParseJson(messageData);
    const event = data['event'];
    const detail = data['detail'];

    // Log any valid events
    dev().info('VLYBYPLAYER', 'EVENT:', event || 'anon event', detail || data);

    if (event === 'setup') {
      this.onSetupOnce_();
      return;
    }

    if (event === 'ready') {
      detail && this.onReadyOnce_(detail);
      return;
    }

    switch (event) {
      case 'play':
      case 'adPlay':
        this.pauseHelper_.updatePlaying(true);
        break;
      case 'pause':
      case 'complete':
        this.pauseHelper_.updatePlaying(false);
        break;
    }

    const {element} = this;

    if (redispatch(element, event, VLYBY_PLAYER_EVENTS)) {
      return;
    }

    if (detail && event) {
      switch (event) {
        case 'fullscreen':
          const {fullscreen} = detail;
          if (fullscreen !== this.isFullscreen()) {
            fullscreen ? this.fullscreenEnter() : this.fullscreenExit();
          }
          break;
        case 'meta':
          const {duration, metadataType} = detail;
          if (metadataType === 'media') {
            this.duration_ = duration;
          }
          break;
        case 'mute':
          const {mute} = detail;
          const {element} = this;
          dispatchCustomEvent(element, mutedOrUnmutedEvent(mute));
          break;
        case 'playedRanges':
          const {ranges} = detail;
          this.playedRanges_ = ranges;
          break;
        case 'playlistItem':
          const playlistItem = {...detail};
          this.playlistItem_ = playlistItem;
          this.sendCommand_('getPlayedRanges');
          break;
        case 'time':
          const {currentTime} = detail;
          this.currentTime_ = currentTime;
          this.sendCommand_('getPlayedRanges');
          break;
        case 'adTime':
          const {position} = detail;
          this.currentTime_ = position;
        default:
          break;
      }
    }
  }

So I assume that iframe that is inside component needs somehow with postMessage or some callback tell the component when it is playing the video to this onMessage_ function 🤔

[alanorozco]

@strix25

Two things to look out for:

1. You're not dispatching the events for play and pause, like you're doing for mute:

   dispatchCustomEvent(element, mutedOrUnmutedEvent(mute));

   Other components do it with redispatch(), that maps a list of strings to event names to dispatch. You don't have to use this if you do whatever that function does for each individually.

2. Make sure you're including the amp-video-docking script on your document when testing.

I will however insist on using amp-video-iframe rather than implementing a new component.

It's much simpler to deal with on your end. Making a new component is a lot of work. You have to create an Intent to Implement issue and have that approved by the rest of the group during a Design Review session.

For video players specifically, we have a policy that specifies that new player components are disallowed unless they do something that amp-video-iframe doesn't do.

[damjan25]

2. I have it included, not sure if the order matters but I have it included before my amp-
   vlyby-player.

Ok thank you. Will look deeper into amp-video-iframe.
Just hope that I can read consent string inside lt.
Main reason for the player would be content and also to play instream advertisement in it eventually.

Hope that doesnt go against this policy:

"amp-video-iframe must not be used for the primary purpose of displaying advertising. It is OK to use amp-video-iframe for the purpose of displaying videos, where part of the videos are advertising"

So this or custom player would be our only option i guess, if we need docking functionality

ps: sorry for writting from 2 accounts strix25=>damjan25

[damjan25]

@alanorozco one last question before closing this ticket.
How to tell player to undock(go back to static position) when video is done playing ? Is there some callback function ?
When videos are done I just want to show thumbnail as a placeholder and undock the player.

Thank you for all the help. This component works really nicely.

[damjan25]

@alanorozco any ideas on this ? It would be really helpful :)

[damjan25]

@alanorozco How to tell player to undock(go back to static position) ? Sometimes it happens that player crashes and then it is showing only white floating (dock) square. It would be really nice if there is some function I can call to tell player to undock.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.