Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
strix25 opened this issue Feb 28, 2022 · 12 comments
Assignees

Comments

@strix25
Copy link

strix25 commented Feb 28, 2022

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

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?
@strix25 strix25 changed the title How to tell video dock component that video is playing so it can undock? How to tell video dock component that video is playing so it can dock? Feb 28, 2022
@strix25 strix25 changed the title How to tell video dock component that video is playing so it can dock? How to tell video dock component that video is playing so it can undock? Feb 28, 2022
@strix25 strix25 changed the title How to tell video dock component that video is playing so it can undock? How to tell video dock component that video is playing so it go to dock position? Feb 28, 2022
@dethstrobe
Copy link
Contributor

@alanorozco

@strix25
Copy link
Author

strix25 commented Mar 1, 2022

@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
Copy link
Member

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

@strix25 strix25 changed the title How to tell video dock component that video is playing so it go to dock position? How to tell video dock component that video is playing so it goes to dock position? Mar 2, 2022
@rsimha
Copy link
Contributor

rsimha commented Mar 2, 2022

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
Copy link
Member

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
Copy link
Author

strix25 commented Mar 2, 2022

  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
Copy link
Member

alanorozco commented Mar 2, 2022

@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
Copy link
Contributor

damjan25 commented Mar 2, 2022

  1. 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
Copy link
Contributor

damjan25 commented Mar 18, 2022

@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
Copy link
Contributor

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

@damjan25
Copy link
Contributor

damjan25 commented Apr 7, 2022

@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
Copy link

stale bot commented Apr 2, 2023

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.

@stale stale bot added the Stale Inactive for one year or more label Apr 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

7 participants