Chromecast Support

[rafa8626]

From @isantolin on February 8, 2017 18:51

@ron666 A lot of players now includes Chromecast support

• VideoJS: https://github.com/benjipott/video.js-chromecast
• Flowplayer: https://flowplayer.electroteque.org/chromecast

Its a good feature, because in the case of Flowplayer is a pay plugin

Copied from original issue: mediaelement/mediaelement#2065

[rafa8626]

@isantolin Thanks. I'll check this

[rafa8626]

Since I don't have a Chromecast device, what's the expected output for this?

[rafa8626]

From @isantolin on February 16, 2017 11:41

When a Chromecast is configured on Browser, a Player with Chromecast support adds a Button to broadcast content to device.

If you dont have a Chromecast, you can use Cheapcast app to emulate

[rafa8626]

From @jimmywarting on February 21, 2017 21:39

+1 (only feature missing for me to swish to elmementjs)

While we are at it. How about adding AirPlay also? here is a demo: https://jsfiddle.net/8gd83urs/?utm_source=website&utm_medium=embed&utm_campaign=8gd83urs

[rafa8626]

From @eposjk on February 24, 2017 16:53

By the way: There is a Web Presentation API ( https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API ) which is already supported by Chrome (seems to be for Chromecast) with an experimental Polyfill which should work without Chromecast ( https://mediascape.github.io/presentation-api-polyfill/ ). What about using that?

[rafa8626]

From @leocaseiro on February 26, 2017 8:51

How about this example, is with mediaelement.js, isn't? http://amoravhad.com/projects/vCast-jQuery/index.html

[rafa8626]

From @jimmywarting on February 26, 2017 10:35

Would like something more internal support rather then having some plugin. Casting is something that everyone would want

[rafa8626]

From @leocaseiro on February 26, 2017 12:1

Hi @jimmywarting

Thanks for your reply.

I'm sorry, it was only a reference that uses mediaelement.js.

The demo app CastVideos-chrome should help with the code as well.

[rafa8626]

From @leocaseiro on February 26, 2017 12:3

The vcast uses a lot from CastVideos.js

[rafa8626]

Thanks all for your comments. I'll check the documentation about this and start working on it. I'll try to include AirPlay. This ticket should be logged in mediaelement-plugins repo BTW

[rafa8626]

From @jimmywarting on February 26, 2017 14:55

videojs also have plugin for casting

https://github.com/benjipott/video.js-chromecast https://github.com/jgubman/videojs-airplay

[rafa8626]

From @jimmywarting on March 14, 2017 17:53

The advantage with presentation api vs chromecast is that you can also cast to some TV's with DIAL (discovery and launch)

[thisanimus]

Any movement on this?

[rafa8626]

I'm still working on this. I've had some issues on the main player that took precedence. But I'll keep you posted in the course of next week

[rafa8626]

@thisanimus, @jimmywarting and @isantolin, I have the chromecast-support branch. I don't have a way to test it since I don't own an Android or Chromecast. If you can point me how can I test this using Mac and iOS I'd appreciate it. Otherwise, if you can test and post your issues here also is welcome.

[thisanimus]

I'll start testing this afternoon. If you want to test on your own, a chromecast can be had for ~$30, the only other thing you need is a chrome browser on any platform.

[rafa8626]

Thanks. Send me screenshots and expected behaviors if you find any issues, please to speed the completion of this plugin

[thisanimus]

Wilco

[jimmywarting]

I was able to select chromecast device

A cast icon turns up on my TV, But i can't see the movie...

I'm seeing this error

 [  8.666s] [cast.framework.EventTarget] Handler for isConnectedChanged event failed: TypeError: Cannot read property 'media' of undefined

[rafa8626]

@jimmywarting Thanks I'll check this issue. I'm not sure where is this happening on my code. If you can help me pointing where I'd appreciate it. In the screenshot I can't see any references to my code

[jimmywarting]

I know, it's weird no reference to your code.

[rafa8626]

@jimmywarting Can you do me a favor and download the project of https://github.com/googlecast/CastVideos-chrome, and install it in your localhost and test it please? This seems to be an issue with the library itself and needs to be reported. If not I'll need the whole trace for this error.

[rafa8626]

Also, download the branch again; I removed some code and allowed a console.error call if any errors with media

[jimmywarting]

This is where it fails:

    loadPlayer () {
        const t = this;

        if (!t.media.paused) {
            t.media.pause();
        }

this/t is undefined

[rafa8626]

Thanks for the hint. I'll check this

[jimmywarting]

a simple t.loadPlayer.bind(this); works but that leaves me with the next error...

// Add event listeners for player changes which may occur outside sender app
t.castPlayerController.addEventListener(cast.framework.castPlayerEventType.IS_PAUSED_CHANGED, function () {
    if (t.castPlayer.isPaused) {
        t.media.pause();
    } else {
        t.media.play();
    }
});

castPlayerEventType is undefined...

[rafa8626]

Comment please the lines related to adding events to t.castPlayerController and see if you have any issues. I tried to set something with those but it may be overkill and clearly it has issues. Let me know

[rafa8626]

And yes I added the bind but I didn't push it. Thanks anyway for the hint

[rafa8626]

Nevermind. The code had a typo for those events and I fixed those. Please check the branch again and test

[rafa8626]

@jimmywarting @thisanimus Any updates on this after the fixes I posted yesterday?

[jimmywarting]

I can't test it at work, don't have a chromecast here so... got to wait a few hours till i get home

[rafa8626]

No problem. Thanks for testing this. If there's anything else missing as well let me know

[jimmywarting]

Now i don't get any errors 👍 it kind of works (poorly)

test 1

1. When i press the chromecast button then the video is not transmitted. Only a chromecast logo appears on the TV like if it's ready to receive (made a connection)

2. I refreshed the page and it manage to remember the connection (session) it had with the TV 👍 now when i press the play button it starts to play the video on both the TV and the website
   
   (Think the poster image should be visible only on the website while playing on the TV)

3. Edit: when i paused the video nothing happened on the TV

test 2

• I disconnected the casting to my TV and did it all over again but this time i have added the volume controller to the demo.
• I connected to the chromecast (still no video) but i changed the volume on the video without reloading and it reflected onto the TV

---

Btw it says SAMPLE with big red text on the TV 🤣

[rafa8626]

Good. I think the SAMPLE comes like that because the cast ID is the one Google uses by default. Unless you obtain a new ID it won't say that anymore. Did you set up the poster attribute on your demo file? What else did you experienced, since I can't really test this myself

[jimmywarting]

I did some own development before i discovered there was a chromecast plugin to VideoJS. Then I used the "Default" player and it didn't say "sample"...

[rafa8626]

Also if you have screenshots of the console output that would be good to see. In that case, you should use the uncompressed version of chromecast plugin instead of the compressed one. Let me know if you have any questions/comments

[jimmywarting]

i didn't had any poster...

[rafa8626]

Right now it has changed some. They have reduced the code that is needed on our end to implement Cast. The one VideoJS implement is using the version 2.0 and we are using 3.0

[jimmywarting]

Okey 👍

[rafa8626]

Keep me posted if you can find anything that I'm not aware of or needs to be implemented so I can release the plugin soon. I need to make sure is stable enough to release it, and since you mentioned poorly, I'm not that sure

[jimmywarting]

Can start of with making the video start playing directly after you have connected to the chromecast. (without having to refresh the page)

[rafa8626]

OK I'll check this later today. Anything else?

[jimmywarting]

• Don't play the video on the website... show a poster or 1 frame instead (maybe some onscreen text like "currently playing on: Living room")
• If you refresh the page it should get all the metadata from the chromecast session like "currently playing big buck bunny, volume, how far into the movie you are" (not sure if it should be done, what if you navigate to another video...?)
• make the play/pause reflect onto the tv so you can pause/resume the video from the website

The seekable maybe work as it should (i manage to seek on website and it skipped on the TV as well) But something feels out of sync (don't know what, maybe it's cuz the video is playing on the website and continues as if it's playing locally - it should reflect the progressbar it has from the chromecast)

[jimmywarting]

example from youtube

This video is frozen on the Website (showing a poster)

[rafa8626]

Thanks for the information. I'll give you an update of this soon

[jimmywarting]

Setting up events for the castPlayerController and updating the media player is easy made 2 PR already, However there is many events that are still missing.

The only thing i haven't wrapped around my head is to get the player to show the video initially when you first connect to the chromecast

[rafa8626]

I think I know how to make the player to show the video initially. I just bought a Chromecast and I'll test tonight. I'll check your PR as well. Thanks

[jimmywarting]

Best investment you have ever made 👍 you won't regret it :)

[rafa8626]

:) I'll keep you posted about the final fixes I'll put for this. Thanks for your help

[rafa8626]

@jimmywarting I may need to step back and integrate this inside of the MediaElement player itself, because of the dual nature of Chromecast. I'll keep you posted on this.