Javascript Chromecast定制接收器媒体播放器样式_Javascript_Html_Css_Chromecast

Javascript Chromecast定制接收器媒体播放器样式

javascript html css

Javascript Chromecast定制接收器媒体播放器样式,javascript,html,css,chromecast,Javascript,Html,Css,Chromecast,我的定制chromecast接收器中有一个视频播放器，这是机身的HTML代码： <body> <div id="player" class="player"> <div id="media"> <video id="receiverVideoElement"></video> </div> <div class="overlay"> <div class="l

我的定制chromecast接收器中有一个视频播放器，这是机身的HTML代码：

<body>
<div id="player" class="player">
    <div id="media">
    <video id="receiverVideoElement"></video>
    </div>
    <div class="overlay">
        <div class="logo"></div>
        <div class="media-artwork"></div>
        <div class="controls">
            <span class="controls-play-pause"></span>
            <span class="controls-cur-time"></span>
            <span class="controls-total-time"></span>
            <div class="controls-progress">
                <div class="controls-progress-inner"></div>
                <div class="controls-progress-thumb"></div>
            </div>
        </div>
        <div class="media-info">
            <div class="media-title"></div>
            <div class="media-subtitle"></div>
        </div>
    </div>
</div>
</body>

在此之后，我启动接收器，就像谷歌Chromecast API中所指示的那样。我在chrome调试中检查了控制台，在上面的方法中加载之后，它直接进入mediaManager的oneded方法并完成。我做错了什么？如果我在播放器div外播放视频标签，效果很好，但我需要对其进行自定义以添加标题/副标题/插图等。

使用document.getElementById（“ReceiveVideoElement”）是否会有所不同？否。我试过了，运气不好

onload = function() {    

    mediaElement = document.querySelector('video');
    mediaElement.autoplay = true;
    ....
    ....
    mediaManager = new cast.receiver.MediaManager(mediaElement);
   mediaManager['onLoadOrig'] = mediaManager.onLoad;

    mediaManager.onLoad = function(event) {

        if(mediaPlayer !== null) {
            mediaPlayer.unload(); // Ensure unload before loading again
        }

        if (event.data['media'] && event.data['media']['contentId']) {
            var url = event.data['media']['contentId'];

            mediaHost = new cast.player.api.Host({
                'mediaElement': mediaElement,
                'url': url
            });

            mediaHost.onError = function (errorCode) {

                if (mediaPlayer !== null) {
                    mediaPlayer.unload();
                }
            }

            var initialTimeIndexSeconds = event.data['media']['currentTime'] || 0;

            var protocol = null;

            var parser = document.createElement('a');
            parser.href = url;

            var ext = ext = parser.pathname.split('.').pop();
            if (ext === 'm3u8') {
                protocol =  cast.player.api.CreateHlsStreamingProtocol(mediaHost);
            } else if (ext === 'mpd') {
                protocol = cast.player.api.CreateDashStreamingProtocol(mediaHost);
            } else if (ext === 'ism/') {
                protocol = cast.player.api.CreateSmoothStreamingProtocol(mediaHost);
            }
            console.log('### Media Protocol Identified as ' + ext);


            if (protocol === null) {

                mediaManager['onLoadOrig'](event); // Call on the original callback
            } else {

                mediaPlayer = new cast.player.api.Player(mediaHost);
                mediaPlayer.load(protocol, initialTimeIndexSeconds);
            }
        }
    }