silvermine / videojs-chromecast

MIT License
148 stars 75 forks source link

Chromecast connects, but wont play media #33

Closed nico-sorice closed 5 years ago

nico-sorice commented 5 years ago

Hi, first of all, thank you for making this plugin.

The plugin loads fine, but when i try to cast, i get the usual chromecast prompt to choose a chromecast device, then i get a blue cast icon in the chromecast tv screen, and after pausing for a second the media player keeps playing in the browser.

If i inspect player.chromecastSessionManager i can see that it claims to be connected (isConnected: true) but also, that media couldnt load (isMediaLoaded: false)

image

for the sake of simplicity and debugging im using a simple mp4 file instead of the hls playlist i plan to use after i make this work.

I dont know where to start debugging this, since i've tried many versions of video.js with no success, and i get no console errors.

here is the simplest example of the bug being reproducible: (NOTE: dont open the html locally since the CastFramework wont load using file:// protocol)

index.html.zip

Sorry about the raw HTML, but codepen wont allow RepresentationApi to be used, if there is another similar service that you know can work just let me know and i'll upload it there...

yokuze commented 5 years ago

@nico-sorice Thank you for the reduced test case! I was able to find a couple of issues in the HTML you posted:

  1. Line 24: window.player = videojs(document.getElementById('myVideoElement', options)); The Video.js options object is getting passed into the call to getElementById, instead of the call to videojs. It should instead be: window.player = videojs(document.getElementById('myVideoElement'), options);
    • 1.b. After making this change, it's no longer necessary to call player.chromecast() and line 26 can be removed.
  2. Line 38: data-setup="{}" overrides the options passed into the call to videojs. This line can be removed because you want to use the options passed in to your call to window.player = videojs(document.getElementById('myVideoElement'), options);

Once you make those two changes, casting should work for you.

P.S. The default view in CodePen runs the code in a sandboxed iframe, so as you said, certain browser APIs will be blocked. If you want to test something that the iframe blocks, you can do so by going to "Change View" and selecting "Debug mode" which will run the code in its own page, without an iframe.

nico-sorice commented 5 years ago

P.S. The default view in CodePen runs the code in a sandboxed iframe, so as you said, certain browser APIs will be blocked. If you want to test something that the iframe blocks, you can do so by going to "Change View" and selecting "Debug mode" which will run the code in its own page, without an iframe.

Great to know...

Its working now, thanks!