这个article解释了“支持Chromecast的网站”的好处:
- 更高的质量:支持Chromecast的网站可以提供最适合在电视上观看的高质量内容。这通常意味着你将获得一个完整的1080p高清图片;对于某些内容,您可能还会获得5.1环绕声(如果您的电视或接收器支持)。在投射选项卡时,您最多只能使用720p(如果您的计算机支持)。
- 电池寿命和计算机负载:支持Chromecast的网站可直接在Chromecast设备上播放,并且不会对您的计算机造成负担。投射标签需要很多计算机的功能,这就是所有计算机都不支持的原因。
- 独立播放:当您从启用Chromecast的网站播放时,您可以关闭计算机或关闭盖子。使用制表符投影,您需要在整个演员表中保持计算机的运行状态。
但是,它没有解释如何在网站上启用Chromecasting。
如何在我的网站上启用Chromecasting?
它只是我可以投射的视频,还是我可以提供的服务,例如,实时新闻源,而无需计算机为其供电?
以下是对我有用的。
1.在页面上添加Chromecast按钮
<button is='google-cast-button'></button>
Google的Chromecast Javascript客户端会自动为此按钮赋予其神奇的力量。它似乎必须是<button>标签,<div>或<span>不会这样做。
2.定义Chromecast onload处理程序
下面的代码是一个最小的实现,它只是在播放时播放单个mp3。完整的文档可在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.包括Google的Chromecast Javascript客户端库
加载后,此Javascript客户端将调用步骤#2中定义的处理程序。
<script src='https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'></script>
注意:chrome.cast和cast.framework API不是来自此客户端库,而是来自Google Chrome本身......该框架内置于Google Chrome浏览器中。
注意:此示例显示如何向Chromecast设备呈现“默认媒体接收器”。如果您想进一步自定义您在Chromecasting设备上看到的体验,则需要向Google注册,支付5美元,然后再做更多工作。