Awesome work, keep going!
it would be great if you can make an android apps that support chromecast
Hello, vCast have auto play?? and playlist automatic???
No automatic play supported at this time. Good idea though, maybe for an update
and playlist??? automatc
When vCast plugin detects videos on the page it will add each video URL to the playlist. However, the vCast plugin currently does not support automatic playback of the playlist at this time
I added auto play feature that automatically casts detected videos.
Can this be used to send m3u8 files to the chromecast? I am looking for a way to send the content on a mobile versus having the mobile app have the coding.
No this won’t read a m3u8 file directly. vCast sends content from a webpage it scans, so the playlist & associated URLs must be in the source code of the webpage you are viewing in the Chrome browser. vCast scans the page per the configuration settings, and it will display a new playlist popup for sending the files to chromecast like in the demo
One example integration which can be done quickly is for WordPress + File Away plugin + vCast for WordPress. File Away can give directory listings of files on your site, so all you need to do is create a new page in WordPress + add Fileaway shortcode + add a container for vCast button (like an html div or whatever you want to contain the cast button). That will give you a file server capable of casting supported media files on your webserver
OK armorm2 I have installed this jQuery version in my WP installation (wp-includes directory) and have followed your example. My other plugins already use same version of jQuery lib so I omitted that part. I only have:
loading in the <head></head> of the page.
Like I mentioned in your WP plugin version, I have JWPlayer as my player. How do I go about configuring the source|attribute, etc, etc. to detect the MP4 URL? Please see my post in the WP plugin version.
Right now, I don’t see the vCast button render on the page. Please refer to this test page: http://test.pnorama.net/big-buck-bunny-jwplayer/
You have an error on the test page in Chrome because you’re mixing the WordPress jQuery version with plain old jQuery syntax used in the vCast jQuery plugin example. On line 313, ”$(document).ready” should be “jQuery(document).ready” just like on line 44
In the ‘ADVANCED PLACEMENT’ section
Thanks. I will try review your demo content in JWPlayer.
Can the vCast sender call the regular Chrome popup prompt from the Chrome toolbar like how most googlecast API-compliant players work? I actually have one in my test site using RoVidX’s custom player but the author inidicated he might deprecate that so I am testing JWPlayer with googlecast—and I am surely not going to pay $999 for their Enterprise version just so I can cast my videos to the TV.
Anyway, yours come up with its own custom window overlay from the main content. I think the normal way that Googlecast does its prompt is best and would be more compatible with future cast devices? I could be wrong here though. Any thoughts?
Answer to your first Question: It does. Once you select the URL to play from vCast’s playlist, and click play, the Chrome toolbar opens the Chromecast Extension window asking you to select which Chromecast you want to send to. Try casting the vCast jQuery demo video from your desktop or laptop + Chrome browser. You’ll see that’s exactly how vCast casts the video
If auto playlist is checked, the Chrome Extension window on your desktop/laptop opens the first time you try to play your video, and you must select the Chromecast to send to. The “remote control device” (ie – your laptop or desktop) then just sits and sends the next video detected in the playlist, once the current video finishes playing
Yes that’s ridiculous $999 just to cast your videos to your, and your website visitors TV’s. vCast is a stand-alone* solution. While the videos can be detected even from dynamic HTML5 players such as JW Player, and the vCast button can be integrated in your existing player, vCast does not follow the Google Cast Design Checklist – https://developers.google.com/cast/docs/design_checklist
The main drawback of not following official Google Cast Design Checklist is losing synchronization between sender device original video player’s location in the stream, and the location in the stream of the currently playing video on the Chromecast.
So since the premise is the sender device will be used solely as the remote, this means if you want to play the video in the sender device you’ll have to start the video in your local/existing player and manually fast forward to the time you were at in the video
*The reasoning: If people just want casting functionality for their videos in the browser on the PC (not mirror/cast the current tab), then in order to do this without sticking to a specific video player, one way is to treat the sender device (your desktop/laptop) as a remote only. That’s what vCast does. It is stand-alone because it uses the custom window overlay to “turn your sender device into the remote”.
Thank you very much Armorm2. I have enough info to test this over the weekend. Wish me luck!
Good luck. The main thing to remember from the JW Player demo is:
span.jwgroup.jwright is the parent container tag the vCast button will be placed into as a child. That span tag with the class ‘jwgroup jwright’ displays on the right side of the media control bar in JW Player, where the vCast button will be placed. If you’d rather place it on the left I believe you can use span.jwgroup.left instead in JW Player
Thanks for the hints.
Update on your demo page: Chromecast does work and it does use the normal Chrome toolbar cast popup..Good video quality but no audio?
I inspected your demo page <head></head> and I found that it has JWPlayer js stuff that my test page don’t have.
If it still doesn’t work. I will play with a self-hosted JWPlayer.
Thanks again, Armorm2.
Please make sure to use this demo page (I will update the listing as well): http://amoravhad.com/projects/vCast-jQuery/demo/
The video on the old demo page was from a third party, and stopped working for some reason. I changed the video used in the demo. The new video should play on Chromecast, with sound. If playing the demo locally in your desktop/laptop browser it should play sound in Chrome
vCast is a front-end solution, CDN-loaded or self-hosted video player doesn’t matter. vCast will work with both as long as the initial configuration is set to detect videos from your webpage correctly. In your case since you want to do custom integration of vCast jQuery button onto an existing player you have to make sure the initial config is also set to detect videos from your video player, which the demo shows how to do this. The demo uses one self-hosted JW Player (v 6.10.4906) file: http://amoravhad.com/projects/vCast-jQuery/demo/jw_player/jwplayer.js
In your case JW Player can be loaded from the CDN as well. That file you have jwplayer.js?ver=4.1.1 is the only one you need to load your JW Player WordPress version. Make sure to load vcast.jquery.js after that file, then use the demo example code (remember the demo is normal jQuery syntax. Your WordPress provides jQuery, however you need to replace all ’$’ in the demo example code with ‘jQuery’)
Thanks for your help Armorm2. I think your solution works good and is a lot more affordable and flexible to integrate with any HTML5 player out there. I just wonder why the existing players make it seem difficult to support the Googlecast API and when they do support it they charge an arm and a leg for it. Keep improving this project. It looks like a winner with your demos. I just need to learn how to integrate it with my website.
OK I got it to work with JWPlayer after many head scratching and pulling what remains of my hairline
I found the vcast.jquery.js from your jQuery version release is not the same as the one in your working demo. I found this by finally using your JS copy from your server and got the cast butto to appear on the JWPlayer controls dock. I went and copied that and replaced my server copy.
Thanks. The plugin works perfectly now.
I have a request.
Instead of showing the playlist overlay as the default when clicking the cast button, can you include a switch to disable this default in the JS to go directly to the Chrome cast popup instead. I know some people wants a playlist while others, like me, will only have strictly one MP4 video URL on one page.
Just want to extend an update.
Your jQuery plugin is working great on most PC browsers that I have tested: Chrome and Firefox mostly. I do not care about IE whether it works or not since my customers do not use it much.
On mobiles, Android casting works from Chrome from the playlist overlay is displayed properly. I did not test Firefox on Android but I can guess it does not since FF does not cast from PC desktops.
On iOS the overlay is displayed in Chrome and Safari therefore vCast code is properly detecting the video URL. When pressing on “play” button it doesn’t call the Chromecast pop-up (as in the desktop would) or calling the iOS Chrome app extension.
I know that Chrome for iOS does not support Chrome plugins as in the desktops as dictated in the SDK terms. So this may be the reason why vCast tries to call the Chromecast browser plugin from JS and is not invoked.
Is there a run-around and call the Chromecast app extension in iOS instead? I am sure this is not technically impossible.
Thanks for your work! This is good stuff!
Can this be added to video.js player? I just need the button not sure what the Playlist is for as the user will be watching a video 1 by 1 not multiple.
i cant get this working at all? can you help
Sorry for the delay. Yes, if you are referring to this video player – http://www.videojs.com/
For example – with JW Player, the video player’s source code is requested sometimes via CDN and only after this is it written to the page dynamically. All this happens after a user clicks the play button on the page. So in this scenario, when the page is done loading there technically is no video player on the page until the user clicks the play button. In this type of video player you need to initialize vCast after the video player is fully on the page, which can be done by using one of the callback functions provided by your video player. Hint: Callback functions like onPlay(..), onLoad(..) from your video player will be ideal to detect when the video link(s) are loaded on the page…
Never done jquery coding before looks abit technical for me
I’m using hellovideo which is laravel and have no idea where what goes I would probably screw up something
can u help with this
Do you have a url or link to a test page containing the video(s) you want to cast to Chromecast?
tried installing again and nothing works, buttons do not show and throws out errors.
Can you provide a publicly accessible link/URL to a test page where you have loaded the vCast jQuery plugin? I need to be able to see in the source code of your web page the configuration you’ve used to setup your vCast button for scanning the content, and placing the button. The page http://mydigitalmovies.co.uk/video/1069 required an account to be created to view the video. The documentation has a sample configuration of vCast jQuery plugin: http://amoravhad.com/projects/vCast-jQuery/index.html#quick_start
I like the look of this app, but wanted to know if I could integrate it with my video site that uses Hellovideo. http://network.armbarerrorsociety.eu
If you go to http://network.armbarerrorsociety.eu/video/301 you can see a video that uses Hellovideo’s proprietary player, which is what I want to integrate it with.
I also want to know if this would work if loaded in an app’s browser rather than on a website on Chrome. In theory I’d like users to be able to start playing a video on this site and then hit the chromecast buttom to send it to their TV.
For what it’s worth, all I know about Hellovideo is that it uses something called Laravel. I bought it from Envato so you should be able to find info there.
Hope this helps. Thank you!
I checked out the reference page where your videos will play – http://network.armbarerrorsociety.eu/video/301
Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.
View license details
Get it now and save up to $3.50
Unlimited graphic downloads & digital courses. Only $29/month
22,000+ templates & 1,000+ courses
Learn almost anything with
Envato Tuts+ for free
9000 free tutorials, 3000 paid courses
Designers matched perfectly to
you on Envato Studio
2000 artists ready to undertake your work