Chromecast Support about mediaelement-plugins HOT 79 CLOSED

@isantolin Thanks. I'll check this

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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?

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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.

from mediaelement-plugins.

From @leocaseiro on February 26, 2017 12:3

The vcast uses a lot from CastVideos.js

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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)

from mediaelement-plugins.

Any movement on this?

from mediaelement-plugins.

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

from mediaelement-plugins.

@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.

from mediaelement-plugins.

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.

from mediaelement-plugins.

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

from mediaelement-plugins.

Wilco

from mediaelement-plugins.

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

from mediaelement-plugins.

@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

from mediaelement-plugins.

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

from mediaelement-plugins.

@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.

from mediaelement-plugins.

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

from mediaelement-plugins.

This is where it fails:

	loadPlayer () {
		const t = this;

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

this/t is undefined

from mediaelement-plugins.

Thanks for the hint. I'll check this

from mediaelement-plugins.

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...

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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 🤣

from mediaelement-plugins.

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

from mediaelement-plugins.

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"...

from mediaelement-plugins.

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

from mediaelement-plugins.

i didn't had any poster...

from mediaelement-plugins.

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

from mediaelement-plugins.

Okey 👍

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

• 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)

from mediaelement-plugins.

example from youtube

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

@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.

from mediaelement-plugins.

@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.

from mediaelement-plugins.

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

from mediaelement-plugins.

Ok thanks keep me posted

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

How is the Chromecast coming along? Any progress?

from mediaelement-plugins.

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

from mediaelement-plugins.

@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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

@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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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';

from mediaelement-plugins.

OK I can remove it

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

@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

from mediaelement-plugins.

@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.

from mediaelement-plugins.

Took a quick glance, Looks good

from mediaelement-plugins.

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

from mediaelement-plugins.

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'))}
  ];
}

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

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

from mediaelement-plugins.

@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?

from mediaelement-plugins.

Sounds good to me

from mediaelement-plugins.

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

from mediaelement-plugins.