Embedded video won't play in Chrome

pdpinch commented 1 year ago

Steps to Reproduce

Open Firefox or Safari.
Go to https://video.odl.mit.edu/videos/1ff73033562c416dad81b9cab6bad7e8/embed/ and click play.
Video plays fine.
Go to https://jsfiddle.net/9Lzphyve/ to see an iframe embedded player, and click play
Video plays fine.
Go to https://video.odl.mit.edu/videos/1ff73033562c416dad81b9cab6bad7e8/embed/ in Chrome.
Video plays fine
Go to https://jsfiddle.net/9Lzphyve/ in Chrome and click play

Expected Behavior

video should play

Actual Behavior

video does not play
loading animation continues indefinitely

Folks from the MIT Chemistry department are trying to get the video to work on http://chemvideos.mit.edu/ as discussed on https://github.com/mitodl/hq/issues/1817

mbertrand commented 1 year ago

There is a JS error on the page in Chrome, but it probably is not the cause of the issue:

cast_sender.js:84 Uncaught DOMException: Failed to construct 'PresentationRequest': The document is sandboxed and lacks the 'allow-presentation' flag.
    at V.initialize (https://www.gstatic.com/eureka/clank/114/cast_sender.js:84:87)
    at chrome.cast.initialize (https://www.gstatic.com/eureka/clank/114/cast_sender.js:98:162)
    at w9.init (https://www.youtube.com/s/player/1dda5629/player_ias.vflset/en_US/remote.js:563:13)
    at ttb (https://www.youtube.com/s/player/1dda5629/player_ias.vflset/en_US/remote.js:247:40)
    at jtb (https://www.youtube.com/s/player/1dda5629/player_ias.vflset/en_US/remote.js:253:9)
    at https://www.youtube.com/s/player/1dda5629/player_ias.vflset/en_US/remote.js:241:402
    at chrome.cast.ea (https://www.gstatic.com/eureka/clank/114/cast_sender.js:100:385)

If the video.odl.mit.edu embed URL is replaced with the direct url for the Youtube video, the above error is still thrown but the video plays: https://jsfiddle.net/d8tuxbhs/1/

mbertrand commented 1 year ago

Possibly relevant for getting rid of the error at least (and maybe that error halts videojs from continuing?): https://stackoverflow.com/questions/55724586/youtube-iframe-without-allow-presentation

ChristopherChudzicki commented 1 year ago

@pdpinch Re

Folks from the MIT Chemistry department are trying to get the video to work on http://chemvideos.mit.edu/

My recommendation is that they embed the video with allow: autoplay;, and possibly some other attributes:

<iframe
src="https://video.odl.mit.edu/videos/1ff73033562c416dad81b9cab6bad7e8/embed/"
frameborder="0"
width="670"
height="503"
allow="autoplay; accelerometer; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
>
</iframe>

Here's a demonstration of this working and the corresponding HTML source.

Alternative: Embed directly from YouTube.

Question

Assuming this solution is acceptable, where's a good place to document it?

Explanation

There are multiple iframes involved here. The chem page has an iframe that loads video.odl.mit.edu, which itself has an iframe that loads YouTube:

#document 
<iframe src="https://video.odl.mit.edu/videos/1ff73033562c416dad81b9cab6bad7e8/embed/">
  #document 
  <html>
    <iframe src="https://www.youtube.com/embed/Iv-oGILpMnc?controls=2&modestbranding=1&rel=0&showinfo=0&loop=0&hl=en&playsinline=true&start=0&widget_referrer=https%3A%2F%2Fchristopherchudzicki.github.io%2F&enablejsapi=1&origin=https%3A%2F%2Fvideo.odl.mit.edu&widgetid=1"
    </iframe>
  </html>
</iframe>

The inner iframe use videojs-youtube to play the YouTube video, which has several issues related to this:

I'm slightly confused why VideoJS needs autoplay permission to play the video with user input, but it does seem to. And Firefox seems less strict about this than Chrome.

I recommended extra permissions (allowfullscreen allow="autoplay; accelerometer; encrypted-media; gyroscope; picture-in-picture") because (1) fullscreen won't work without allowfullscreen, if they want that; (2) I suspect, but have not tested, that some mobile features like rotating the video to fit phone won't work without accelerometer / gyroscope.

One caveat

I could not get this solution to work smoothly in JSFiddle. JSFiddle displays user content in an iframe, so now there's an extra layer of iframing and we can't pass the allow value to that frame.

mitodl / odl-video-service