如何为网站启用 Chromecast？

Question

这 article 解释了 "Chromecast-enabled site" 的好处：

• Higher quality: Chromecast-enabled sites can serve high quality content that is best for viewing on TV. This will often means you'll get a full 1080p high definition picture; for some content you may also get 5.1 surround sound (if supported by your TV or receiver). When Casting a tab, you are limited to a maximum of 720p (if supported by your computer).
• Battery life and computer load: Chromecast-enabled sites play directly on Chromecast devices and put no load on your computer. Casting a tab requires a lot of your computer's power, which is why it's not supported on all computers.
• Plays independently: When you play from a Chromecast-enabled site, you can shut down your computer or close the lid. With tab projection, you need to keep your computer on throughout the cast.

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

我需要做什么才能在我的网站上启用 Chromecast？

它只是我可以投射的视频吗，或者我是否可以提供实时新闻提要，而不需要计算机来驱动它？

Answer 1

以下是对我有用的方法。

1.将 Chrome投射按钮添加到您的页面

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

Google 的 Chromecast Javascript 客户端将自动赋予此按钮其魔力。似乎必须是一个标签，

或不行。

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.frameworkAPI 不是来自此客户端库，而是来自 Google Chrome 本身...该框架内置于 Google Chrome 浏览器中。

注意：此示例展示了如何将 "default media receiver" 渲染到您的 Chromecast 设备。如果您想进一步自定义在您 Chrome 投射到的设备上看到的体验，您需要在 Google 上注册，支付 5 美元，然后做更多的工作。