Trang này được dịch bởi Cloud Translation API.

Thêm các tính năng nâng cao vào ứng dụng Web Sender

Điểm chèn quảng cáo

Web Sender SDK hỗ trợ các Điểm chèn quảng cáo và quảng cáo đồng hành trong một luồng nội dung nghe nhìn nhất định.

Hãy xem phần Tổng quan về điểm chèn quảng cáo của Web Receiver để biết thêm thông tin về cách hoạt động của Điểm chèn quảng cáo.

Mặc dù bạn có thể chỉ định điểm chèn quảng cáo trên cả thiết bị gửi và thiết bị nhận, nhưng bạn nên chỉ định điểm chèn quảng cáo trên Web Receiver và Android TV Receiver để duy trì hành vi nhất quán trên các nền tảng.

Trên web, hãy chỉ định Điểm chèn quảng cáo trong lệnh tải bằng cách sử dụng BreakClip và Break:

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)

Sử dụng API theo dõi

Một đối tượng theo dõi có thể là đối tượng văn bản (phụ đề) hoặc đối tượng luồng âm thanh hoặc video. Tracks API cho phép bạn làm việc với các đối tượng này trong ứng dụng của mình.

Đối tượng Track biểu thị một bản nhạc trong SDK. Bạn có thể định cấu hình một bản nhạc và chỉ định một mã nhận dạng duy nhất cho bản nhạc đó như sau:

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;

Một mục nội dung nghe nhìn có thể có nhiều bản phụ đề; ví dụ: mục đó có thể có nhiều phụ đề (mỗi phụ đề cho một ngôn ngữ khác nhau) hoặc nhiều luồng âm thanh thay thế (cho các ngôn ngữ khác nhau).

MediaInfo là lớp mô hình hoá một mục nội dung nghe nhìn. Để liên kết một tập hợp các đối tượng Track với một mục nội dung nghe nhìn, bạn hãy cập nhật thuộc tính tracks của đối tượng đó. Bạn cần thực hiện mối liên kết này trước khi tải nội dung nghe nhìn vào bộ nhận:

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;

Bạn có thể đặt các bản phụ đề đang hoạt động trong yêu cầu activeTrackIds về nội dung nghe nhìn.

Bạn cũng có thể kích hoạt một hoặc nhiều bản phụ đề được liên kết với mục nội dung nghe nhìn sau khi nội dung nghe nhìn được tải bằng cách gọi EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) và truyền mã nhận dạng của các bản phụ đề cần kích hoạt trong opt_activeTrackIds. Xin lưu ý rằng cả hai tham số này đều không bắt buộc và bạn có thể chọn đặt tham số nào (các bản phụ đề hoặc kiểu phụ đề đang hoạt động) tuỳ ý. Ví dụ: sau đây là cách kích hoạt phụ đề tiếng Pháp (2) và âm thanh tiếng Pháp (3):

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

Để xoá tất cả các bản âm thanh hoặc video khỏi nội dung nghe nhìn hiện tại, chỉ cần đặt mediaInfo.tracks=null (một mảng trống) và tải lại nội dung nghe nhìn.

Để xoá tất cả phụ đề khỏi nội dung nghe nhìn hiện tại (ví dụ: tắt phụ đề), hãy làm một trong những việc sau:

Cập nhật var activeTrackIds = [2, 3]; (đã xuất hiện trước đó) để chỉ bao gồm [3], bản âm thanh.
Đặt mediaInfo.tracks=null. Xin lưu ý rằng bạn không cần tải lại nội dung nghe nhìn để tắt phụ đề dạng văn bản (track.hidden). Việc gửi một mảng activeTracksId không chứa trackId đã bật trước đó sẽ tắt bản phụ đề.

Tạo kiểu cho phụ đề

TextTrackStyle là đối tượng đóng gói thông tin tạo kiểu của một phụ đề. Sau khi tạo hoặc cập nhật một đối tượng TextTrackStyle hiện có, bạn có thể áp dụng đối tượng đó cho mục nội dung nghe nhìn đang phát bằng cách gọi phương thức editTrackInfo của đối tượng đó, như sau:

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

Bạn có thể theo dõi trạng thái của yêu cầu bằng kết quả của các lệnh gọi lại, có thể là thành công hoặc lỗi, rồi cập nhật cho người gửi ban đầu cho phù hợp.

Các ứng dụng phải cho phép người dùng cập nhật kiểu cho phụ đề, bằng cách sử dụng chế độ cài đặt do hệ thống cung cấp hoặc do chính ứng dụng cung cấp.

Bạn có thể tạo kiểu cho các phần tử kiểu phụ đề sau:

Độ mờ và màu nền trước (văn bản)
Màu nền và độ mờ nền
Loại viền
Màu viền
Tỷ lệ phông chữ
Họ phông chữ
Kiểu phông chữ

Ví dụ: đặt màu văn bản thành màu đỏ với độ mờ 75% như sau:

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

Điều chỉnh âm lượng

Bạn có thể dùng RemotePlayer và RemotePlayerController để đặt âm lượng của bộ nhận.

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

Ứng dụng người gửi phải tuân thủ các nguyên tắc sau để kiểm soát âm lượng:

Ứng dụng người gửi phải đồng bộ hoá với thiết bị nhận để giao diện người dùng của người gửi luôn báo cáo âm lượng theo thiết bị nhận. Sử dụng lệnh gọi lại RemotePlayerEventType.VOLUME_LEVEL_CHANGED và RemotePlayerEventType.IS_MUTED_CHANGED để duy trì âm lượng trên thiết bị gửi. Hãy xem phần Thông tin cập nhật về trạng thái để biết thêm thông tin.
Ứng dụng người gửi không được đặt mức âm lượng ở một mức cụ thể, được xác định trước hoặc đặt mức âm lượng thành âm lượng chuông/nội dung nghe nhìn của thiết bị người gửi khi ứng dụng tải trên thiết bị nhận.

Xem phần Các chế độ kiểm soát âm lượng của người gửi trong Danh sách kiểm tra thiết kế.

Gửi tin nhắn đa phương tiện cho người nhận

Media Messages có thể được gửi từ người gửi đến người nhận. Ví dụ: để gửi một thông báo SKIP_AD đến máy thu:

// 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
    });
  }
});

Tin cập nhật trạng thái

Khi nhiều người gửi được kết nối với cùng một người nhận, mỗi người gửi cần biết về các thay đổi trên người nhận, ngay cả khi những thay đổi đó được bắt đầu từ những người gửi khác.

Để làm được điều này, ứng dụng của bạn phải đăng ký tất cả trình nghe cần thiết trên RemotePlayerController. Nếu TextTrackStyle của nội dung nghe nhìn hiện tại thay đổi, thì tất cả người gửi được kết nối sẽ nhận được thông báo và các thuộc tính tương ứng của phiên nội dung nghe nhìn hiện tại, chẳng hạn như activeTrackIds và textTrackStyle của trường MediaInfo sẽ được gửi đến người gửi trong các lệnh gọi lại. Trong trường hợp này, Receiver SDK không xác minh xem kiểu mới có khác với kiểu trước đó hay không và thông báo cho tất cả người gửi được kết nối bất kể điều gì.

Chỉ báo tiến trình

Hiển thị vị trí phát bằng chỉ báo tiến trình trên thiết bị gửi là một yêu cầu đối với hầu hết các ứng dụng. Cast API sử dụng giao thức nội dung nghe nhìn Cast, giúp tối ưu hoá mức tiêu thụ băng thông cho trường hợp này và các trường hợp khác, vì vậy, bạn không cần triển khai tính năng đồng bộ hoá trạng thái của riêng mình. Để biết cách triển khai đúng chỉ báo tiến trình phát nội dung nghe nhìn bằng API, hãy xem ứng dụng mẫu CastVideos-chrome.

Yêu cầu về CORS

Đối với tính năng truyền phát trực tiếp nội dung nghe nhìn thích ứng, Google Cast yêu cầu phải có tiêu đề CORS, nhưng ngay cả các luồng nội dung nghe nhìn mp4 đơn giản cũng yêu cầu CORS nếu chúng có chứa Tracks. Nếu muốn bật phụ đề cho nội dung nghe nhìn bất kỳ, bạn phải bật CORS cho cả luồng phụ đề và luồng nội dung nghe nhìn. Vì vậy, nếu không có tiêu đề CORS cho nội dung nghe nhìn mp4 đơn giản trên máy chủ và sau đó bạn thêm một tệp phụ đề đơn giản, thì bạn sẽ không thể phát trực tuyến nội dung nghe nhìn trừ phi bạn cập nhật máy chủ để thêm tiêu đề CORS thích hợp.

Bạn cần có các tiêu đề sau: Content-Type, Accept-Encoding và Range. Xin lưu ý rằng 2 tiêu đề cuối cùng, Accept-Encoding và Range, là các tiêu đề bổ sung mà trước đây bạn có thể không cần.

Bạn không thể sử dụng ký tự đại diện "*" cho tiêu đề Access-Control-Allow-Origin. Nếu trang có nội dung đa phương tiện được bảo vệ, thì trang đó phải sử dụng một miền thay vì ký tự đại diện.

Tiếp tục một phiên mà không cần tải lại trang web

Để tiếp tục một CastSession hiện có, hãy sử dụng requestSessionById(sessionId) với sessionId của phiên mà bạn đang cố gắng tham gia.

Bạn có thể tìm thấy sessionId trên CastSession đang hoạt động bằng cách sử dụng getSessionId() sau khi gọi loadMedia().

Phương pháp được đề xuất là:

Gọi loadMedia() để bắt đầu phiên
Lưu trữ sessionId trên thiết bị
Tham gia lại phiên bằng cách sử dụng requestSessionById(sessionId) khi cần

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();
  }
});

Các bước tiếp theo

Đến đây là hết các tính năng mà bạn có thể thêm vào ứng dụng Web Sender. Giờ đây, bạn có thể tạo một ứng dụng sender cho một nền tảng khác (Android hoặc iOS) hoặc tạo một ứng dụng receiver.

Tích hợp tính năng Truyền