Question

我的自定义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>

这是我的java脚本文件中的onLoad方法。它似乎没有识别播放器div中的视频元素

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);
            }
        }
    }

在此之后，我按照Google Chromecast API中的说明启动接收器。我在chrome调试中检查了控制台，在上面的方法加载后，它直接进入mediaManager的onEnded方法并完成。我究竟做错了什么？如果我在播放器div之外播放视频标签，它工作正常但我需要自定义它以添加标题/副标题/艺术品等。

Chromecast自定义接收器媒体播放器样式

0 个答案: