Chromecast Support #23

rafa8626 · 2017-04-03T03:41:13Z

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 · 2017-04-03T03:41:14Z

@isantolin Thanks. I'll check this

rafa8626 · 2017-04-03T03:41:14Z

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

rafa8626 · 2017-04-03T03:41:14Z

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 · 2017-04-03T03:41:14Z

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 · 2017-04-03T03:41:14Z

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 · 2017-04-03T03:41:15Z

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 · 2017-04-03T03:41:15Z

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 · 2017-04-03T03:41:15Z

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 · 2017-04-03T03:41:15Z

From @leocaseiro on February 26, 2017 12:3

The vcast uses a lot from CastVideos.js

rafa8626 · 2017-04-03T03:41:15Z

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 · 2017-04-03T03:41:16Z

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 · 2017-04-03T03:41:16Z

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 · 2017-04-12T22:22:21Z

Any movement on this?

rafa8626 · 2017-04-12T22:24:03Z

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 · 2017-04-17T13:50:27Z

@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 · 2017-04-17T14:36:01Z

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 · 2017-04-17T15:03:10Z

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

thisanimus · 2017-04-17T15:36:27Z

Wilco

jimmywarting · 2017-04-17T16:27:48Z

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 · 2017-04-17T17:28:37Z

@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 · 2017-04-17T17:56:51Z

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

rafa8626 · 2017-04-17T18:06:34Z

@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 · 2017-04-17T18:22:54Z

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

jimmywarting · 2017-04-17T19:15:17Z

This is where it fails:

	loadPlayer () {
		const t = this;

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

this/t is undefined

rafa8626 · 2017-04-17T19:26:26Z

Thanks for the hint. I'll check this

rafa8626 · 2017-04-21T12:34:34Z

@jimmywarting I almost have the new work setup for Chromecast. I have a new branch to support AirPlay. Is there a chance you can test it, please? If so, check the airplay-support branch.

jimmywarting · 2017-04-21T13:15:02Z

I have a AirPlay here at work that i might be able to test today, but if not then i can install a AirPlay reciver on my android to test it

rafa8626 · 2017-04-21T13:44:17Z

Ok thanks keep me posted

jimmywarting · 2017-04-22T19:26:54Z

I installed airpin (lite) on my android to test the airplay

there was but one small issue with the spelling but otherwise it did look good 👍
Made a PR to fix it

Also Player wasn't wasn't available, didn't know where you got that from¿
don't think it was needed

rafa8626 · 2017-04-22T19:28:18Z

My apologies I had a typo. I'll review your PR and merge it. Thanks for testing this and helping me with this

jimmywarting · 2017-04-24T11:19:21Z

How is the Chromecast coming along? Any progress?

rafa8626 · 2017-04-24T11:30:58Z

There has been new attempts but I really need to redesign something on the main player to achieve the proper result. It's more complicated than I thought but I'm on that. I'll let you know when I have the new branch on the other repo ready

rafa8626 · 2017-04-25T14:02:08Z

@jimmywarting Just FYI, I almost have Chromecast ready. I need to test it tonight, but the tests I ran today showed that it was working as expected. I'm adding a layer to display poster and the name of the device is being casted. If you wanna go ahead and test it right now I'll push it. I don't have a Chromecast here to validate all the changes I made, but if you can help me with that I'd appreciate it. Let me know so I can push the changes on the chromecast-support branch

jimmywarting · 2017-04-25T14:09:38Z

I can test it when i get home approximately in 2 to 3 hours

rafa8626 · 2017-04-25T14:21:44Z

OK sounds good. Keep me posted please. And again, I don't have a Cast device here to check the last changes I made so potentially I could have made a mistake. Just download the latest version of the branch for this please

rafa8626 · 2017-04-25T14:57:21Z

Nm. I need to rework one last piece before you test it @jimmywarting I'll send you tomorrow an status of this. Thanks and sorry for the incovenience

rafa8626 · 2017-04-25T20:46:31Z

@jimmywarting You can test it now. I have solved all but 2 things here:

If you don't push the button for Chromecast, and try to play the video on the website, it doesn't play
Need to test more when switching media sources

If you have any clues or ideas on how to solve these 2 items, let me know. I need to step back some since I'm being so involved that I need a second opinion

jimmywarting · 2017-04-25T21:11:37Z

A lot has changed in the plugin from last time.
A complete new renderer.
That's new to me.

I tested it the demo and were presented with a video without a poster,
trying to play the bunny video didn't work. nothing happens, no logs

rafa8626 · 2017-04-25T21:18:07Z

Yeah that's what I still need to figure out how to fix it since it's like basically having 2 players in one, but I tested it connecting to Chromecast and it worked for me

jimmywarting · 2017-04-25T21:27:24Z

Yea, it worked for me too. when i connected to it
Would it be possible to have the chromecast always visible? So that i can have a chromecast to connect to without having to do it through the browser

removing:

button.style.display = 'none';

rafa8626 · 2017-04-25T21:35:46Z

OK I can remove it

rafa8626 · 2017-04-25T21:38:41Z

The only issue is that if the plugin doesn't detect a Chromecast device, it won't show up the button

rafa8626 · 2017-04-25T22:34:56Z

I fixed some typos. And if you connect and then disconnect, it will work as expected. I just need to figure out what to do when you haven't connected at all properly

rafa8626 · 2017-04-25T23:26:18Z

@jimmywarting I fixed the first issue completely. It should now work as expected. Please test the latest changes on the branch and let me know. If you wanna add any PRs you are welcome to do it. One thing I haven't considered here is tracks, and that could be very helpful as well. Thanks

rafa8626 · 2017-04-26T11:30:25Z

@jimmywarting Once you finish testing Chromecast branch, can you just take a quick look to the AirPlay branch, please? I completed the changes for the button status color and with that I can merge it into the master branch. Let me know how the Chromecast plugin worked for you. I'll be checking the addition of Tracks API in Chromecast as well to close the loop on this.

jimmywarting · 2017-04-26T19:25:55Z

Took a quick glance, Looks good

rafa8626 · 2017-04-26T19:27:06Z

Great. I just need to finalize the tracks implementation (which is almost done) and more documentation and it will be merged in master. Thanks for testing this

jimmywarting · 2017-04-26T21:09:15Z

question: why do you use thumb instead of poster?

if (mediaElement.originalNode.getAttribute('data-thumb')) {
  mediaInfo.metadata.images = [
    {'url': mejs.Utils.absolutizeUrl(mediaElement.originalNode.getAttribute('data-thumb'))}
  ];
}

rafa8626 · 2017-04-26T21:23:47Z

I just saw an example and you could have the poster image for the static player and a thumbnail for the cast. I don't know if that's standard or not. I can always remove the thumbnail and only use the poster of needed. Let me know

jimmywarting · 2017-04-27T06:29:38Z

This is only my theory, but I think many will use the same poster as the thumbnail.
I know I would

rafa8626 · 2017-04-27T06:35:50Z

OK, changing that, I think the plugin is ready. On a second iteration I'll integrate tracks but I need to know more details about this. So please test the latest version of the branch one more and let me know so I can merge this in the master branch. Thanks

rafa8626 · 2017-04-28T10:53:08Z

@jimmywarting Are you good with merging the branch into master? I did the change to remove the data-cast-thumb in favor of poster. I tried to enable captions before doing this but seems that there's an error setting them and I reported this to Google. So for now it will work without captions. Does that sound good?

jimmywarting · 2017-04-28T11:05:11Z

Sounds good to me

rafa8626 · 2017-04-28T11:09:42Z

Excellent. Thanks a lot for your help. I'll keep you posted when captions are working. Closing this ticket since it has been merged to master

rafa8626 added Feature In Progress labels Apr 3, 2017

rafa8626 mentioned this issue Apr 3, 2017

Chromecast Support mediaelement/mediaelement#2065

Closed

rafa8626 added Completed and removed In Progress labels Apr 17, 2017

rafa8626 closed this as completed Apr 28, 2017

Chromecast Support #23

Chromecast Support #23

Comments

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

rafa8626 commented Apr 3, 2017

thisanimus commented Apr 12, 2017

rafa8626 commented Apr 12, 2017

rafa8626 commented Apr 17, 2017

thisanimus commented Apr 17, 2017

rafa8626 commented Apr 17, 2017

thisanimus commented Apr 17, 2017

jimmywarting commented Apr 17, 2017 • edited

rafa8626 commented Apr 17, 2017

jimmywarting commented Apr 17, 2017

rafa8626 commented Apr 17, 2017 • edited

rafa8626 commented Apr 17, 2017

jimmywarting commented Apr 17, 2017

rafa8626 commented Apr 17, 2017

rafa8626 commented Apr 21, 2017

jimmywarting commented Apr 21, 2017

rafa8626 commented Apr 21, 2017

jimmywarting commented Apr 22, 2017 • edited

rafa8626 commented Apr 22, 2017

jimmywarting commented Apr 24, 2017

rafa8626 commented Apr 24, 2017

rafa8626 commented Apr 25, 2017

jimmywarting commented Apr 25, 2017

rafa8626 commented Apr 25, 2017

rafa8626 commented Apr 25, 2017

rafa8626 commented Apr 25, 2017

jimmywarting commented Apr 25, 2017 • edited

rafa8626 commented Apr 25, 2017

jimmywarting commented Apr 25, 2017 • edited

rafa8626 commented Apr 25, 2017

rafa8626 commented Apr 25, 2017

rafa8626 commented Apr 25, 2017

rafa8626 commented Apr 25, 2017 • edited

rafa8626 commented Apr 26, 2017

jimmywarting commented Apr 26, 2017

rafa8626 commented Apr 26, 2017

jimmywarting commented Apr 26, 2017

rafa8626 commented Apr 26, 2017

jimmywarting commented Apr 27, 2017

rafa8626 commented Apr 27, 2017

rafa8626 commented Apr 28, 2017 • edited

jimmywarting commented Apr 28, 2017

rafa8626 commented Apr 28, 2017 • edited

jimmywarting commented Apr 17, 2017 •

edited

rafa8626 commented Apr 17, 2017 •

edited

jimmywarting commented Apr 22, 2017 •

edited

jimmywarting commented Apr 25, 2017 •

edited

jimmywarting commented Apr 25, 2017 •

edited

rafa8626 commented Apr 25, 2017 •

edited

rafa8626 commented Apr 28, 2017 •

edited

rafa8626 commented Apr 28, 2017 •

edited