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

Javascript Chromecast定制接收器媒体播放器样式,javascript,css,chromecast,Javascript,Css,Chromecast,我正在使用媒体播放器库来播放我的HLS流,我正在尝试对其进行样式化。我想在加载前放置动画等。这就是我在媒体管理器的onLoad方法中所做的 window.onload = function () { mediaElement = document.querySelector('video'); mediaElement.autoplay = true; ... } mediaManager.onLoad = function (event) {

我正在使用媒体播放器库来播放我的HLS流,我正在尝试对其进行样式化。我想在加载前放置动画等。这就是我在媒体管理器的onLoad方法中所做的

  window.onload = function ()
  {
     mediaElement = document.querySelector('video');
     mediaElement.autoplay = true;
     ...
  }

 mediaManager.onLoad = function (event)
 {
  var title = event.data['media']['metadata']['title'];

  var titleElement = this.receiverelement.querySelector('.media-title');
  videoplayer.setInnerText_(titleElement, title);

  var subtitle = event.data['media']['metadata']['subtitle'];
  var subtitleElement = this.receiverelement.querySelector('.media-subtitle');
  videoplayer.setInnerText_(subtitleElement, subtitle);

  var artwork = videoplayer.getValue_(event.data, ['media', 'metadata',
      'images', 0, 'url']);
  var artworkElement = this.receiverelement.querySelector('.media-artwork');
  videoplayer.setBackgroundImage_(artworkElement, artwork);

  var autoplay = videoplayer.getValue_(event.data, ['autoplay']);
  var contentId = videoplayer.getValue_(event.data, ['media', 'contentId']);
  var contentType = videoplayer.getValue_(event.data, ['media', 'contentType']
      );
  this.videoType(contentType);
  this.currentState(videoplayer.State.LOADING, false);
  this.videoElement.autoplay = autoplay || true;
  this.videoElement.src = contentId || '';
  if (event.data['media'] && event.data['media']['contentId']) {
    var url = event.data['media']['contentId'];
    var mediaHost = new cast.player.api.Host({
                    'mediaElement': this.videoElement,
                    'url': url
               });

    mediaHost.onError = function (errorCode) {
        console.error('### HOST ERROR - Fatal Error: code = ' + 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)
    {
        this.load.bind(this);
    }
    else
    {
        mediaPlayer = new cast.player.api.Player(mediaHost);
        mediaPlayer.load(protocol, initialTimeIndexSeconds);
    }

  }

我还在使用DRM所需的媒体播放器库吗?videoElement变量是指HTML中的视频标记。在media manager onload函数中,我将其源设置为视频url。这样,我是否仍在使用媒体播放器库,是否仍可以为DRM等设置licenseURL?如果没有,如何设置媒体播放器的样式?

已设置样式的媒体接收器也使用MPL。如果许可证URL嵌入到清单中,那么这应该适用于DRM。如果您需要任何类型的身份验证,则需要创建自定义接收器。

是,我需要进行身份验证。我想知道你能否帮我回答这个问题。我在DRM自定义接收器上遵循这个Google示例,在第548行中,它说将mediaElement.src设置为data.media.contentId,但我没有看到将url设置为视频标记源。你能解释一下这是怎么发生的吗?我尝试了这个示例,即使没有mediaElement.src=contentId,它仍然显示一个m3u8文件。这是如何工作的?Cast媒体名称空间协议负责在媒体元素上设置媒体源。