How does Chromecast - enable a website?
This article explains the benefits of a Chromecast-enabled site:
- High Quality: Sites with Chromecast support can serve high quality content that's best for watching on TV. This often means you get a full 1080p high definition image; for some content you may also get 5.1 surround sound (if supported by your TV or receiver). When creating a tab, you are limited to a maximum of 720p (if supported by your computer).
- Battery Life and Computer Boot: Chromecast-enabled sites run directly on Chromecast devices with no load on the computer. It takes a lot of computers to create a tab, so it is not supported on all computers.
- Plays independently: . When playing from a Chromecast-enabled site, you can close your computer or close the lid. With the projection tab, you have to support your computer while streaming.
However, it does not explain how to enable Chromecasting on the website.
What do I need to do to enable Chromecasting on my website?
Is this just a video that I can use, or can I serve, for example, in a live news feed without requiring the computer to use it?
source to share
Below is what worked for me.
1. Add a Chromecast button to the page
<button is='google-cast-button'></button>
The Google Chromecast Javascript client will automatically grant this button magical powers. It seems like it should be a button <tag, <div> or <span> won't.
2. Define the Chromecast onload handler
The code below is a minimal implementation, it just plays one mp3 when casting. Full documentation is available at https://developers.google.com/cast/docs .
window.__onGCastApiAvailable = function(isAvailable){
if(! isAvailable){
return false;
}
var castContext = cast.framework.CastContext.getInstance();
castContext.setOptions({
autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});
var stateChanged = cast.framework.CastContextEventType.CAST_STATE_CHANGED;
castContext.addEventListener(stateChanged, function(event){
var castSession = castContext.getCurrentSession();
var media = new chrome.cast.media.MediaInfo('https://www.example.com/my-song.mp3', 'audio/mp3');
var request = new chrome.cast.media.LoadRequest(media);
castSession && castSession
.loadMedia(request)
.then(function(){
console.log('Success');
})
.catch(function(error){
console.log('Error: ' + error);
});
});
};
3. Include Google Chromecast Javascript Client Library
When loaded, this Javascript client will call your handler defined in step 2.
<script src='https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'></script>
Note. The chrome.cast and cast.framework API do not come from this client library, but from Google Chrome itself ... the framework is built into the Google Chrome browser.
Note. This example shows how to render the default media receiver on your Chromecast device. If you want to further customize the experience seen on the Chromecasting device, you need to sign up with Google, pay $ 5 and get the job done.
source to share