2
按鈕，我試圖解決這個代碼玩創建2個按鈕playNext和playPrev，但沒有happend如何創建playNext（）playPrev（）針對Chromecast
源鏈接[CastVideos鉻的樣品] [ 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（）
mine是Chrome應用程序，我想創建2個按鈕playNext（），playPrev（），看看JSON數組，以獲得我的觀點。問候 – Fadi