javascript - 如何为 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

This class supports various style attributes that your app can override in a custom theme. This example shows how to enable the display of the thumbnail image, to override the text appearance of both the subhead and closed caption, set the colors, and customize the buttons:

这是一个代码片段:

<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 .

希望这有帮助。