如何为 chromecast 创建 playNext() playPrev() 按钮

Question

我试图绕过这段代码来创建 2 个按钮 playNext 和 playPrev 但什么也没发生

来源链接 [CastVideos-chrome-samples][1]

/** * 版权所有 (C) 2016 Google Inc. 保留所有权利。 * * 根据 Apache 许可证 2.0 版（“许可证”）获得许可； * 除非遵守许可，否则您不得使用此文件。 * 您可以在以下网址获取许可证的副本 * * http://www.apache.org/licenses/LICENSE-2.0 * * 除非适用法律要求或书面同意，否则软件 *根据许可分发是在“原样”基础上分发的， * 不提供任何明示或暗示的保证或条件。 * 请参阅许可证以了解特定语言的管理权限和 * 许可证下的限制。 */

/**
 * Shortcut to get element by id.
 * @param {string} name
 * @return {?Element}
 */

function $(name) {
  return document.getElementById(name);
}


/**
 * Remote Player data.
 * @type {!cast.framework.RemotePlayer}
 */
var player;


/**
 * Remote Player controller.
 * @type {!cast.framework.RemotePlayerController}
 */
var playerController;


/**
 * Update seek progress bar.
 */
function updateSeek() {
  $('seekProgress').value = playerController.getSeekPosition(
      player.currentTime, player.duration) || 0;
  $('seekString').innerText =
      playerController.getFormattedTime(player.currentTime) + ' / ' +
      playerController.getFormattedTime(player.duration);
}


/**
 * Update volume progress bar.
 */
function updateVolume() {
  $('volumeProgress').value = Number(player.volumeLevel) * 100;
}


/**
 * Seek click handler.
 * @param {!Event} event
 */
function seekClick(event) {
  if (player.canSeek) {
    var percent = 100 * event.offsetX / $('seekProgress').offsetWidth;
    player.currentTime = playerController.getSeekTime(percent, player.duration);
    playerController.seek();
    updateSeek();
  }
}


/**
 * Volume click handler.
 * @param {!Event} event
 */
function volumeClick(event) {
  if (player.isConnected) {
    player.volumeLevel = event.offsetX / $('volumeProgress').offsetWidth;
    playerController.setVolumeLevel();
    updateVolume();
  }
}


/**
 * Initialize cast service.
 * @param {boolean} isAvailable
 * @param {?string} reason
 */
window['__onGCastApiAvailable'] = function(isAvailable, reason) {
  if (!isAvailable) {
    $('castDiv').style.display = 'none';
    $('playerControl').style.display = 'none';
    $('castError').innerText = reason;
    return;
  }

  // Init cast
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });

  // Init player controller
  player = new cast.framework.RemotePlayer();;
  playerController = new cast.framework.RemotePlayerController(player);
  $('playerControl').hidden = true;

  // Listen to player properties changes
  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
        $('muteButton').disabled = !player.isConnected;
        $('playerControl').hidden = !player.isConnected;
        $('localPlayer').hidden = player.isConnected;
        var videoElement = $('videoElement');
        if (player.isConnected) {
          // Continue playing remotely what is playing locally.
          if (videoElement.src) {
            // If local playback is done, do not play on remote
            if (videoElement.currentTime < videoElement.duration) {
              playRemote(
                  getMediaIndex(videoElement.src), videoElement.currentTime,
                  videoElement.paused);
              videoElement.removeAttribute('src');
              videoElement.load();
            }
          }
        } else {
          // Continue playing locally what is playing remotely.
          if (player.savedPlayerState && player.savedPlayerState.mediaInfo) {
            var mediaId =
                getMediaIndex(player.savedPlayerState.mediaInfo.contentId);
            if (mediaId >= 0) {
              playLocally(
                  mediaId, player.savedPlayerState.currentTime,
                  player.savedPlayerState.isPaused);
            } else {
              console.log(
                  'Unknown media is playing ' +
                  player.savedPlayerState.mediaInfo.contentId);
            }
          }
        }

      });

  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.CURRENT_TIME_CHANGED, updateSeek);
  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.DURATION_CHANGED, updateSeek);
  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.VOLUME_LEVEL_CHANGED, updateVolume);

  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.IS_PAUSED_CHANGED, function() {
    $('playPauseButton').innerText = player.isPaused ? 'Play' : 'Pause';
  });

  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.IS_MUTED_CHANGED, function() {
    $('muteButton').innerText = player.isMuted ? 'Unmute' : 'Mute';
  });

  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.CAN_PAUSE_CHANGED, function() {
    $('playPauseButton').disabled = !player.canPause;
  });

  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.IMAGE_URL_CHANGED, function() {
    $('mediaImage').src = player.imageUrl;
    $('mediaImage').hidden = !player.imageUrl;
  });

  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.STATUS_TEXT_CHANGED, function() {
    $('statusText').innerText = player.statusText;
  });

  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.TITLE_CHANGED, function() {
    $('mediaTitle').innerText = player.title;
  });

  playerController.addEventListener(
      cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    var newVal = player.mediaInfo;
    var subtitle =
        (newVal && newVal.metadata && newVal.metadata.subtitle) || '';
    $('mediaDesc').innerText = subtitle;
  });
};


var MEDIA_SOURCE_ROOT =
    'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/';


/**
 * Available media.
 */
var MEDIA_CONTENT = [
  {
    'source': MEDIA_SOURCE_ROOT + 'BigBuckBunny.mp4',
    'title': 'Big Buck Bunny',
    'subtitle': 'By Blender Foundation',
    'thumb': MEDIA_SOURCE_ROOT + 'images/BigBuckBunny.jpg',
    'contentType': 'video/mp4',
    'description': 'Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain\'t no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org'
  },
  {
    'source': MEDIA_SOURCE_ROOT + 'Sintel.mp4',
    'title': 'Sintel',
    'subtitle': 'By Blender Foundation',
    'thumb': MEDIA_SOURCE_ROOT + 'images/Sintel.jpg',
    'contentType': 'video/mp4',
    'description' : 'Sintel is an independently produced short film, initiated by the Blender Foundation as a means to further improve and validate the free/open source 3D creation suite Blender. With initial funding provided by 1000s of donations via the internet community, it has again proven to be a viable development model for both open 3D technology as for independent animation film.\nThis 15 minute film has been realized in the studio of the Amsterdam Blender Institute, by an international team of artists and developers. In addition to that, several crucial technical and creative targets have been realized online, by developers and artists and teams all over the world.\nwww.sintel.org'
  }
];

function getMediaIndex(source) {
  for (var i = 0; i < MEDIA_CONTENT.length; i++) {
    if (MEDIA_CONTENT[i]['source'] == source) {
      return i;
    }
  }
  return -1;
}

/**
 * Start playing media on remote device.
 * @param {number} mediaIndex Media index.
 */
function playMedia(mediaIndex) {
  if (player.isConnected) {
    playRemote(mediaIndex, 0, false);
  } else {
    playLocally(mediaIndex, 0, false);
  }
}

/**
 * Play media on remote device.
 * @param {number} mediaIndex Media index.
 * @param {number} currentTime Seek time into the media.
 * @param {boolean} isPaused Media will start paused if true;
 */
function playRemote(mediaIndex, currentTime, isPaused) {
  var session = cast.framework.CastContext.getInstance().getCurrentSession();
  if (session) {
    var content = MEDIA_CONTENT[mediaIndex];
    var mediaInfo = new chrome.cast.media.MediaInfo(
        content['source'], content['contentType']);
    mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
    mediaInfo.metadata.title = content['title'];
    mediaInfo.metadata.subtitle = content['subtitle'];
    mediaInfo.metadata.images = [{'url': content['thumb']}];
    var request = new chrome.cast.media.LoadRequest(mediaInfo);
    request.currentTime = currentTime;
    request.autoplay = !isPaused;
    session.loadMedia(request).then(
        function() {
          console.log('Load succeed');
        },
        function(e) {
          console.log('Load failed ' + e);
        });
  }
}


/**
 * Play media on local player.
 * @param {number} mediaIndex Media index.
 * @param {number} currentTime Seek time into the media.
 * @param {boolean} isPaused Media will start paused if true;
 */
function playLocally(mediaIndex, currentTime, isPaused) {
  var content = MEDIA_CONTENT[mediaIndex];
  var videoElement = $('videoElement');
  videoElement.src = content['source'];
  videoElement.currentTime = currentTime;
  videoElement.load();
  if (isPaused) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

注意：onclick playMedia()

Answer 1

你必须使用MiniControllerFragment

此类支持您的应用可以在自定义主题中覆盖的各种样式属性。此示例说明如何启用缩略图显示、覆盖副标题和隐藏式字幕的文本外观、设置颜色以及自定义按钮：

这是一个代码sn-p：

<style name="CustomCastMiniController" parent="CastMiniController">
    <item name="castShowImageThumbnail">true</item>
    <item name="castTitleTextAppearance">@style/TextAppearance.AppCompat.Subhead</item>
    <item name="castSubtitleTextAppearance">@style/TextAppearance.AppCompat.Caption</item>
    <item name="castBackground">#FFFFFF</item>
    <item name="castProgressBarColor">#FFFFFF</item>
    <item name="castPlayButtonDrawable">@drawable/cast_ic_mini_controller_play</item>
    <item name="castPauseButtonDrawable">@drawable/cast_ic_mini_controller_pause</item>
    <item name="castStopButtonDrawable">@drawable/cast_ic_mini_controller_stop</item>
    <item name="castLargePlayButtonDrawable">@drawable/cast_ic_mini_controller_play_large</item>
    <item name="castLargePauseButtonDrawable">@drawable/cast_ic_mini_controller_pause_large</item>
    <item name="castLargeStopButtonDrawable">@drawable/cast_ic_mini_controller_stop_large</item>
    <item name="castSkipPreviousButtonDrawable">@drawable/cast_ic_mini_controller_skip_prev</item>
    <item name="castSkipNextButtonDrawable">@drawable/cast_ic_mini_controller_skip_next</item>
    <item name="castRewind30ButtonDrawable">@drawable/cast_ic_mini_controller_rewind30</item>
    <item name="castForward30ButtonDrawable">@drawable/cast_ic_mini_controller_forward30</item>
    <item name="castMuteToggleButtonDrawable">@drawable/cast_ic_mini_controller_mute</item>
    <item name="castClosedCaptionsButtonDrawable">@drawable/cast_ic_mini_controller_closed_caption</item>
</style>

您也可以使用ExpandedController 自定义它，您也可以查看此sample implementation。

希望这会有所帮助。