Как создать индивидуальный пользовательский интерфейс приложения-приемника CAF?

Я пытался создать приложение-приемник CAF с пользовательским интерфейсом из того, что здесь предлагает Google:

Пользовательская привязка данных пользовательского интерфейса

Вот мой источник:

<!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?


javascript chromecast
person Frank Tian    schedule 27.06.2018    source источник
comment
Вы проверяли журналы на наличие ошибок?   -  person Mr.Rebot    schedule 29.06.2018
comment
Вы когда-нибудь догадывались об этом? Я задаюсь тем же вопросом, и мне не повезло   -  person thattolleyguy    schedule 17.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

Включите cast-media-player в тег body

person Ankit    schedule 28.11.2019
comment
Привет, @Ankit, добро пожаловать в Stack Overflow! Спасибо, что нашли время ответить на этот вопрос. Однако имейте в виду, что это сайт, на который заходят коллеги-программисты, чтобы учиться. Ваш вклад, хотя и оценен, мог бы быть еще более полезным, если бы вы включили фрагмент кода, который объясняет, как делать то, что вы предлагаете. - person Lutz; 28.11.2019