Proposal: Basic embedded iframe player API

[andrewostrin]

Similarly to YouTube iframe API
https://developers.google.com/youtube/iframe_api_reference

components/video-player/VideoPlayer.jsx

useEffect(() => {
    window.addEventListener('message', handleEmbedApi);
}, [])

function handleEmbedApi(message) {
    let data = JSON.parse(message.data);
    
    if ('playVideo' === data.func) {
      player.player.play();
    }
    
    if ('pauseVideo' === data.func) {
      player.player.pause();
    }
    
    if ('seekTo' === data.func && 'object' === typeof data.args) {
      player.player.currentTime(data.args[0]);
    }
}

[mgogoulos]

There is embedded, under the share options below a video. Are you referring to this or something else?

[andrewostrin]

The idea was to add a few listeners to pass commands (play/pause/seek etc) from the host window to embedded iframe player via window.postMessage.

Both Youtube and Vimeo have similar APIs.
https://developers.google.com/youtube/iframe_api_reference

[ruvilonix]

I believe they're asking about an API for a webpage to be able to control (start, pause, etc) an embedded video, the way Youtube explains here: https://developers.google.com/youtube/iframe_api_reference

And if they weren't asking about that, I would still like to propose that feature. I was seeing if it existed when I found this issue.

[ruvilonix]

I'm trying to add this functionality to my site myself by using postMessage and editing the files in /static/js to execute the same functions as the player buttons themselves, but it's very hard with only a minified javascript file to try to understand. Is there a non-minified video.min.js file somewhere? I see a video.js file in the same directory, but it is also minified.

[andrewostrin]

I monkey-patched it via video-js api for the time being. Drop this in a separate js file and require it in templates/cms/embed.html.

window.addEventListener('message', (message) => {
  let player = videojs(document.getElementsByClassName('video-js')[0])
  let data = JSON.parse(message.data)

  if(data.func === 'playVideo') {
    player.play()
  }
	
  if(data.func === 'pauseVideo') {
    player.pause()
  }
})

Usage:
iframe.contentWindow.postMessage(JSON.stringify({ event: 'command', func: 'playVideo' }), '*')

[ruvilonix]

I appreciate it! I'm having troubles though. Changing embed.html does not seem to do anything. I changed the bottom of the file to look like this:

{% block bottomimports %}
<script src="{% static "js/embed.js" %}"></script>
<script src="{% static "js/playerapi.js" %}"></script>
{% endblock bottomimports %}

But there is no change to the embedded video page. I even changed the name of embed.css to see if the css would break, but it still uses the old html.

[ruvilonix]

Instead I tried just putting the player.play() function directly into _commons.js. But now when I try to run the function, the browser tells me Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

Edit: Oh, nevermind, it's because I hadn't interacted with the page yet. It works, thank you! I am still curious why changing embed.html doesn't do anything.