Going nuts! Need help with playerjs callback/listener

emergingdzns commented 5 years ago

I haven't been able to find a single usable example of how to use the playerjs.io stuff. I have the following code:

            <script>
                window.playerConfiguration = {
                    "episode": {
                        "media": {"mp3": "{ url to the video here}",
                        "title": "Podcast Title",
                        "coverUrl": "{ url to the cover image }", // this does not seem to work
                        "description": "Description of the podcast here",
                        "chaptermarks": [chapter marks go here]
                    },
                    "options": {
                        "startPanel": "ChapterMarks"
                    }
                };
            </script>
            <script class="podigee-podcast-player" src="vendor/podcast-player/javascripts/podigee-podcast-player.js" data-configuration="playerConfiguration"></script>

I've tried to understand where/how I would take advantage of the playerjs system. What I need is to be able to fetch the player timeline position every x seconds. I'm so confused by the vague mentions and no real documentation or examples of how Podigee uses the playerjs system. I don't understand the coffee scripts.

Would greatly appreciate a little nudge! I'll buy someone a beer for helping fast!

benzimmer commented 5 years ago

Here is a simple client implementation: https://github.com/embedly/player.js/blob/master/SPEC.rst#client

Hope that helps.

emergingdzns commented 5 years ago

I've looked at that 10 ways from Sunday but it doesn't help. I tried just copy/paste but there's no obvious link between the podigee player and this example.

When I put that in and use the right id for the iframe (which I have to fetch because podigee sets up some crazy string id that I have no idea where it comes from) I get this error:

Uncaught TypeError: Cannot read property 'postMessage' of null

I've console logged the iframe contentWindow and it does show me:

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

But then immediately after that it gives me that error that seemingly says that the contentWindow is null. Doesn't make any sense since I'm able to console log that object out.

benzimmer commented 5 years ago

Here is a 100% working example using the playerjs library:

<html>
  <head>
    <title>Podigee Player.js Demo</title>
    <meta content='width=device-width' name='viewport'>

    <script type="text/javascript" src="//cdn.embed.ly/player-0.0.12.min.js"></script>
  </head>
  <body>
    <h1>Test</h1>

    <script class="podigee-podcast-player" src="/build/javascripts/podigee-podcast-player.js" data-configuration="https://podcast-news.podigee.io/embed?context=external"></script>

    <script>
      var iframes = document.getElementsByTagName('iframe')
      Array.from(iframes).forEach(function (iframe) {
        if (!iframe.className.includes('podigee-podcast-player')) return
        iframe.onload = function() {
          var player = new playerjs.Player(iframe);

          player.on('ready', function(){
            console.log('ready', arguments)
            player.on('play', function(){
              console.log('play');
            });
          });
        }
      })
    </script>
  </body>
</html>

emergingdzns commented 5 years ago

Awesome!! Thank you!

That is exactly what I needed. I was missing the frame onload and player definition stuff. All the difference in the world!

You rock!

benzimmer commented 5 years ago

Sure thing! If you need reliable podcast hosting sometime in the future, we also run a podcast hosting service that rocks ;)

What are you using the player for if I may ask?

emergingdzns commented 5 years ago

I have embedded it into a mobile web app for medical professionals. We like the way your player does the chapters and keeps playing after you leave the app etc. Great product. The audio is hosted by the client's video hosting/streaming service so I can't really move it at this point. But now that I know it works well I have a friend that is starting a podcast. I'll recommend your service.

benzimmer commented 5 years ago

Thanks for telling! Have a great weekend!

podigee / podigee-podcast-player

Going nuts! Need help with playerjs callback/listener #68