via icon indicating copy to clipboard operation
via copied to clipboard

Gracefully handle functional limitations when Via video player is iframed

Open robertknight opened this issue 2 years ago • 1 comments

Some functions of the video player will not be available if it is embedded in a cross-origin iframe which does not delegate various permissions. These include:

  1. Being able to start the video from the "Play" button outside the player
  2. Being able to use the "Copy transcript" button
  3. Enabling the full-screen button in the player

In the LMS context, the ContentFrame component tries to ensure that these permissions are available.

However, there are cases outside of our control where these permissions won't be available:

  • If our LMS app is itself placed inside an iframe (by the LMS which launches the assignment) which doesn't have these permissions, it won't be able to delegate them down to the video player.
  • If a third-party embeds our public Via service within an iframe

In the case where the video player does not have these permissions, it should gracefully handle the situation. It would be useful to also indicate to developers in the browser console how to fix the issue. This will help future Hypothesis developers and other publishers when they find new places to embed our player.

robertknight avatar Aug 01 '23 08:08 robertknight

As an example of how YouTube's video player handles this, if the frame doesn't have full-screen permission then the full-screen button is still displayed in the player but is dimmed. Hovering the button shows a "Full-screen is not available" tooltip.

From the three cases mentioned in the description (autoplay, clipboard-write, fullscreen), full-screen is handled for us by the YT player, for the "copy transcript" button we could do something similar to how YT handles the full-screen button. For the "Play" button we would need to do something slightly different, as the button's functionality is only unavailable before the user clicks the video player. The easiest approach might simply be to hide the button until playback has started at least once (by clicking the video player). Alternatively we could disable the button and indicate in a toast message that the user must click the video player to start playback.

robertknight avatar Aug 01 '23 09:08 robertknight