如何通过Chromecast启用网站？

Question

此文章解释了"启用Chromecast的站点"的好处:

• 更高的质量:支持 Chromecast的网站可以提供最适合在电视上观看的高质量内容.这通常意味着你将获得一个完整的1080p高清图片; 对于某些内容,您可能还会获得5.1环绕声(如果您的电视或接收器支持).在投射选项卡时,您最多只能使用720p(如果您的计算机支持).
• 电池寿命和计算机负载:支持 Chromecast的网站可直接在Chromecast设备上播放,并且不会对您的计算机造成负担.投射标签需要很多计算机的功能,这就是所有计算机都不支持的原因.
• 独立播放:当您从启用Chromecast的网站播放时,您可以关闭计算机或关闭盖子.使用制表符投影,您需要在整个演员表中保持计算机的运行状态.

但是,它没有解释如何在网站上启用Chromecasting.

如何在我的网站上启用Chromecasting？

它只是我可以投射的视频,还是我可以提供的服务,例如,实时新闻源,而无需计算机为其供电？

Answer 1

以下是对我有用的。

1.在页面上添加Chromecast按钮

<button is='google-cast-button'></button>

Google的Chromecast Javascript客户端将自动赋予该按钮其神奇的力量。似乎必须是<button>标记，<div>或<span>不会。

2.定义Chromecast加载处理程序

下面的代码是一个最低限度的实现，播放时仅播放一个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并非来自该客户端库，但谷歌的Chrome ...框架构建在谷歌Chrome浏览器。

注意：此示例显示了如何向您的Chromecast设备呈现“默认媒体接收器”。如果您想进一步自定义要在Chromecasting上观看的设备上的体验，则需要在Google注册，并支付5美元，并做更多的工作。