Question

我一直在尝试根据Google的建议使用自定义UI创建CAF接收器应用程序：

这是我的出处：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
    </script>
</head>
<body>
<div style="width: 100%; height: 100%; background-color: white ">
    <h1>Hello</h1>
    <video style="border: 1px solid red"></video>
    <div id="label"></div>
</div>
<script>
const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();

const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

// Update ui according to player state
playerDataBinder.addEventListener(
    cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
    e => {
    switch (e.value) {
        case cast.framework.ui.State.LAUNCHING:
            window.getElementById("label").innerHTML = "Launching"
        case cast.framework.ui.State.IDLE:
        // Write your own event handling code
            window.getElementById("label").innerHTML = "Idle"
        break;
        case cast.framework.ui.State.LOADING:
        // Write your own event handling code
            window.getElementById("label").innerHTML = "Loading"
        break;
        case cast.framework.ui.State.BUFFERING:
        // Write your own event handling code
            window.getElementById("label").innerHTML = "Buffering"
        break;
        case cast.framework.ui.State.PAUSED:
        // Write your own event handling code
            window.getElementById("label").innerHTML = "Paused"
        break;
        case cast.framework.ui.State.PLAYING:
        // Write your own event handling code
            window.getElementById("label").innerHTML = "Playing"
        break;
        default:
            window.getElementById("label").innerHTML = "Default state"
    }
    });
context.start();
</script>
</body>
</html>

目前由于某些原因，我不能这样做。接收器应用将不会显示播放器的内容，而只会在屏幕上显示一个空白元素。

我想知道是否有在线资源可以教您如何为CAF接收器应用程序构建自定义UI？

Answer 1

请在身体标签中添加演员阵容播放器

如何构建自定义的CAF接收器应用程序UI？

1 个答案: