为 Web 发件人应用添加高级功能

使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

广告插播时间点

Web Sender SDK 支持给定媒体流中的广告插播时间点和随播广告。

如需详细了解广告插播时间点的运作方式,请参阅网络接收器广告插播时间点概览

虽然可以在发送器和接收器上指定中断,但建议在网络接收器Android TV 接收器上指定这些断点,以保持跨平台的一致行为。

在 Web 上,使用 BreakClipBreak 在加载命令中指定广告插播时间点:

let breakClip1 = new BreakClip('bc0');
breakClip1.title = 'Clip title'
breakClip1.posterUrl = 'https://www.some.url';
breakClip1.duration = 60;
breakClip.whenSKippable = 5;

let breakClip2 = ...
let breakClip3 = ...

let break1 = new Break('b0', ['bc0', 'bc1', 'bc2'], 10);

let mediaInfo = new chrome.cast.media.MediaInfo(<contentId>, '<contentType');
...
mediaInfo.breakClips = [breakClip1, breakClip2, breakClip3];
mediaInfo.breaks = [break1];

let request = new chrome.cast.media.LoadRequest(mediaInfo);

cast.framework.CastContext.getInstance().getCurrentSession().loadMedia(request)

使用 Tracks API

轨道可以是文本(字幕或字幕)对象,也可以是音频或视频串流对象。借助 Tracks API,您可以在应用中使用这些对象。

Track 对象表示 SDK 中的轨道。您可以配置轨道,并为其分配唯一 ID,如下所示:

var englishSubtitle = new chrome.cast.media.Track(1, // track ID
  chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = 'https://some-url/caption_en.vtt';
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;

var frenchSubtitle = new chrome.cast.media.Track(2, // track ID
  chrome.cast.media.TrackType.TEXT);
frenchSubtitle.trackContentId = 'https://some-url/caption_fr.vtt';
frenchSubtitle.trackContentType = 'text/vtt';
frenchSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
frenchSubtitle.name = 'French Subtitles';
frenchSubtitle.language = 'fr';
frenchSubtitle.customData = null;

var frenchAudio = new chrome.cast.media.Track(3, // track ID
  chrome.cast.media.TrackType.AUDIO);
frenchAudio.trackContentId = 'trk0001';
frenchAudio.trackContentType = 'audio/mp3';
frenchAudio.subtype = null;
frenchAudio.name = 'French Audio';
frenchAudio.language = 'fr';
frenchAudio.customData = null;

媒体项可以有多个音轨;例如,它可以有多个字幕(每个字幕对应不同的语言)或多个备用音频流(对应不同的语言)。

MediaInfo 是用于为媒体建模的类。如需将一组 Track 对象与媒体项关联,请更新其 tracks 属性。您需要在将媒体加载到接收器之前建立这种关联:

var tracks = [englishSubtitle, frenchSubtitle, frenchAudio];
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
mediaInfo.contentType = 'video/mp4';
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.customData = null;
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
mediaInfo.duration = null;
mediaInfo.tracks = tracks;

您可以在媒体 activeTrackIds 请求中设置活跃轨道。

您还可以在加载媒体后调用 EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) 并在 opt_activeTrackIds 中传递要激活的轨道的 ID,从而激活与媒体项关联的一个或多个轨道。请注意,这两个参数均为可选参数,您可以自主选择要设置的有效音轨或样式。例如,下面展示了如何启用法语字幕 (2) 和法语音频 (3):

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

如需从当前媒体中移除所有音频或视频轨道,只需设置 mediaInfo.tracks=null(空数组)并重新加载媒体即可。

如需从当前媒体中移除所有文本轨道(例如,关闭字幕),请执行以下操作之一:

  • 更新 var activeTrackIds = [2, 3];(如前所示),使其仅包含 [3],即音轨。
  • 只需设置 mediaInfo.tracks=null。请注意,无需重新加载媒体即可关闭文本字幕 (track.hidden)。发送不包含先前启用的 trackIdactiveTracksId 数组会停用文本轨道。

设置文字轨道样式

TextTrackStyle 是用于封装文本轨道的样式信息的对象。创建或更新现有 TextTrackStyle 对象后,您可以通过调用其 editTrackInfo 方法将其应用于当前正在播放的媒体项,如下所示:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

您可以使用回调的结果(成功或错误)来跟踪请求的状态,并相应地更新源发送者。

应用应允许用户使用系统或应用本身提供的设置更新文字轨道的样式。

您可以为以下文本轨道样式元素设置样式:

  • 前景(文字)颜色和不透明度
  • 背景颜色和不透明度
  • 边缘类型
  • 边缘颜色
  • 字体大小
  • 字体系列
  • 字体样式

例如,将文本颜色设为不透明度为 75% 的红色,如下所示:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';

音量控制

您可以使用 RemotePlayerRemotePlayerController 设置接收器音量。

function changeVolume(newVolume) {
  player.volumeLevel = newVolume;
  playerController.setVolume();
  // Update sender UI to reflect change
}

发送者应用应遵循以下音量控制准则:

  • 发送器应用必须与接收端同步,以便发送端界面始终根据接收端报告音量。使用 RemotePlayerEventType.VOLUME_LEVEL_CHANGEDRemotePlayerEventType.IS_MUTED_CHANGED 回调保持发送者的音量。如需了解详情,请参阅状态更新
  • 发送者应用不得在接收设备加载时将音量设置为特定预定义级别,或将音量设置为发送者设备的铃声/媒体音量。

请参阅设计核对清单中的发送者音量控件

向接收者发送媒体消息

Media Messages 可以从发送者发送到接收者。例如,如需向接收器发送 SKIP_AD 消息,请执行以下操作:

// Get a handle to the skip button element
const skipButton = document.getElementById('skip');
skipButton.addEventListener("click", function() {
  if (castSession) {
    const media = castSession.getMediaSession();
    castSession.sendMessage('urn:x-cast:com.google.cast.media', {
      type: 'SKIP_AD',
      requestId: 1,
      mediaSessionId: media.mediaSessionId
    });
  }
});

状态更新

当多个发送者连接到同一接收器时,每个发送者都有必要了解接收器上发生的变化,即使这些变化是从其他发送者发起的。

为此,您的应用应在 RemotePlayerController 上注册所有必要的监听器。如果当前媒体的 TextTrackStyle 发生更改,则所有已连接的发送者都将收到通知,并且当前媒体会话的相应属性(例如 MediaInfo 字段的 activeTrackIdstextTrackStyle)将在回调中发送给发送者。在这种情况下,接收器 SDK 不会验证新样式是否与之前的样式不同,并通知所有已连接的发件人。

进度指示器

对于大多数应用来说,要求在发送器上显示进度指示器和进度指示器。Cast API 使用 Cast 媒体协议,可针对这种情况和其他场景优化带宽消耗,因此您无需实现自己的状态同步。如需了解如何使用 API 正确实现媒体播放进度指示器,请参阅 CastVideos-chrome 示例应用。

CORS 要求

对于自适应媒体流式传输,Google Cast 要求存在 CORS 标头,但即使是简单的 mp4 媒体流,如果包含曲目,也需要 CORS。如果您要为任何媒体启用轨道,则必须同时为您的轨道流和媒体流启用 CORS。因此,如果您的服务器上没有可用于简单 mp4 媒体的 CORS 标头,那么在您添加简单的字幕轨道后,除非更新服务器以包含适当的 CORS 标头,否则将无法流式传输媒体内容。

您需要以下标头:Content-TypeAccept-EncodingRange。请注意,最后两个标头 Accept-EncodingRange 是您之前可能不需要的额外标头。

通配符“*”不能用于 Access-Control-Allow-Origin 标头。如果该网页包含受保护的媒体内容,该网页必须使用网域而不是通配符。

在不重新加载网页的情况下恢复会话

如需恢复现有的 CastSession,请将 requestSessionById(sessionId) 与您尝试加入的会话的 sessionId 搭配使用。

调用 loadMedia() 后,您可以使用 getSessionId() 在活跃 CastSession 上找到 sessionId

推荐的方法是:

  1. 调用 loadMedia() 以启动会话
  2. 在本地存储 sessionId
  3. 根据需要使用 requestSessionById(sessionId) 重新加入会话
let sessionId;

function rejoinCastSession() {
  chrome.cast.requestSessionById(sessionId);

  // Add any business logic to load new content or only resume the session
}

document.getElementById('play-button').addEventListener(("click"), function() {
  if (sessionId == null) {
    let castSession = cast.framework.CastContext.getInstance().getCurrentSession();
    if (castSession) {
      let mediaInfo = createMediaInfo();
      let request = new chrome.cast.media.LoadRequest(mediaInfo);
      castSession.loadMedia(request)

      sessionId = CastSession.getSessionId();
    } else {
      console.log("Error: Attempting to play media without a Cast Session");
    }
  } else {
    rejoinCastSession();
  }
});

后续步骤

您可以添加到 Web Sender 应用的功能到此结束。您现在可以为其他平台(AndroidiOS)构建发送者应用,或者构建接收者应用