Add Google Cast support

[gurupras]

Note: This is WIP and currently provides a prototype with rudimentary google cast support

Link to related issue (if applicable)

#112, #412

Sumary of proposed changes

• Add new cast button to plyr controls
• Add new file google-cast.js responsible for containing Google Cast support
• Currently pollutes this object with remotePlayer and remotePlayerController objects
  • Should be moved into separate namespace

Known Issues

• Unable to perform operations on video once video finishes playing
  • Casting sort of ends once the video is done

Task list

• Play
• Pause
• Seek
• Volume
• Quality
• Change video src
• Support for captions
• Ensure plyr.less changes make sense
• Update scss sources (?)
• Switching between multiple plyrs on same page
• Support YouTube and Vimeo videos (?)
• Support HLS / DASH / Shaka
• Ensure things comply with code standards
• Tested on supported browsers
• Gulp build completed

[sampotts]

Hey, the google-cast.js file can probably go in the /plugins folder? Eventually I'll work out a way to include/exclude these without breaking the core functionality.

Remember to use Prettier and ESLint plugins if you have them

[gurupras]

Done and done. I'll keep working on implementing the remaining functionality

[sampotts]

Thanks. I can assist with any UI parts if there's any left when the time comes.

[zannix]

Any progress on this wonderful feature? :)

[Fransferdy]

Is there a way for me to pull this prototype version of chrome cast support ?

[gurupras]

You should be able to merge my branch into master without issues. The stuff that's checked in the OP works AFAIK.

[sampotts]

I’ll need to take another look but it’s showing a load of tasks as incomplete?

[gurupras]

It is incomplete. I need to spend some time and get the captions done and support the streaming options. That said, it does work for simple HTML5 videos loaded via <video src='...'>

I'll work on hosting a page with the google-cast version of it built-in so that people can use it to get a sense of what works.

[sampotts]

That’d be good. I’m happy to merge to a new branch and then host the demo on a sub folder of plyr.io. Then I can look at any UI tweaks required.

[gurupras]

Alright, in that case it's ready to be merged and put up for a basic demo.
I'll work on getting the captions done and try to get a version of HLS/Shaka/DASH working.

[Fransferdy]

To have the plugins work, do I have only to build the project with gulp, or do I need to include the plugin file directly in the browser ? Also, taking advantage of this question, if it is only a question of adding the chrome cast button to the video toolbar, what is the name of the button component (such as airplay is for airplay) ? Thanks in advance. You guys are awesome!

[gurupras]

You should just be able to run gulp and then have it work. The branch modifies the default set of controls to include the google-cast button.

[Fransferdy]

Well, doing some testing, I'm not sure if the following issues are specific to the chromecast build or to plyr itself, but I found some breaking issues
on Firefox:

After Pressing the Play Button, the video toolbar disappears forever, and the middle screen play "ball" button stay visible (although not clickable)

[gurupras]

Ah crap. This is probably due to the fact that the google-cast plugin crashes during initialization when window.chrome is not defined (which wouldn't be defined on browsers other than Chrome). This in turn probably breaks the remaining plyr initialization logic.
I don't know how to add a button on some browsers and not on others in plyr, but I can certainly prevent it from breaking everything else. Let me do that right now.

[Fransferdy]

I fixed on my code by doing an early return in the google cast setup if (!window.chrome). And removed chrome cast on non chrome browsers by setting the controls option. Such as:

var myControls = ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'];
if (window.chrome)
myControls[myControls.length] = 'googlecast';

Cheers

[gurupras]

Yeah, the problem is, I don't know if I should do something like that inside the plyr source.
I'll wait for @sampotts to comment on this and then figure out how to move forward.

[philipgiuliani]

Is there already a demo online to see what's working and what not? I have tried to build it myself, but I wasn't able to get it running for some reason. The cast button didn't appear although the Cast extension shows 2 devices.

[vbasky]

Is there any traction on this PR?

[Fransferdy]

This feature is working. I am on a machine without node now so I just created a repo with the working distribution folder.
https://github.com/Fransferdy/plyrbinwithcast
The feature works on Chrome browsers and fails gracefully on others.
Here's a sample of usage:
`<script>

var myControls = ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'];
if (window.chrome)
{
myControls[myControls.length] = 'googlecast';
}

const player = new Plyr('#videoplayer',
{
iconUrl:'plyr/plyr.svg',
controls: myControls
});

</script>`

It was built with the most recent Plyr by Apr 30.

[gurupras]

​At this point, I've sort of stopped working on this since there's a couple of directions to go down and I'm not sure which is the right one.

One is to write a custom receiver so that the styling of the player on your TV matches Plyr, or, at the very least, is superior to the default one. The other is to leave that to the applications (that make use of Plyr) and just give them a bare-bones implementation that uses the default receiver.

There is obviously work required to get live streaming videos to work, but, I'm sort of trying to help test Plyr and come up with bugfixes where I can.

[irazasyed]

Any update on this or it's a dead end?

[liquidvisual]

Any updates on this? So keen to get this feature.

[gurupras]

This feature works. You're welcome to merge it and have a working rudimentary cast support. I just haven't found the time to design it better and decide whether to support the new CAF player.

…

On Tue, Aug 28, 2018 at 10:13 PM, Mitch ***@***.***> wrote: Any updates on this? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#706 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACzB18rP_TZyicKlMRcK2BPNK2paRr_iks5uVfisgaJpZM4QSg7w> .

[paulrostorp]

Is this mergeable ?

[sampotts]

Is this mergeable ?

I think the fork needs updating as it's quite far behind now.

[gurupras]

I'll update the PR to be mergeable with the master branch.

Last I checked, the PR works for HTML5 videos like mp4 and webm. The biggest outstanding issue with this PR is that I don't know how to get things like HLS/DASH to work.

There is also the question of whether attempts to play content from YouTube, etc should use plyr or the YouTube (cast) app.

I'll try and spend some time this week to see if I can improve the PR.

[vbasky]

I'll update the PR to be mergeable with the master branch.

Last I checked, the PR works for HTML5 videos like mp4 and webm. The biggest outstanding issue with this PR is that I don't know how to get things like HLS/DASH to work.

There is also the question of whether attempts to play content from YouTube, etc should use plyr or the YouTube (cast) app.

I'll try and spend some time this week to see if I can improve the PR.

@gurupras to get it to work with dash / hls best bet is to bundle it with Shaka Player

[irazasyed]

@gurupras Any possibilities to make it mergeable?

[gurupras]

I've force-pushed to make it mergeable with the develop branch. Unable to devote time to finish this end-to-end 🙁

[ulrikstoch]

Any updates on this being merged into the main branch?

[codybarr]

I'm thinking this line needs to be removed, yeah?