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

SDK Trình gửi web 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 Trình thu phát web để 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ả trình gửi và trình nhận, nhưng bạn nên chỉ định điểm chèn quảng cáo trên Trình nhận web và Trình nhận Android TV để 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 kênh

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

Đối tượng Track đại diện cho một kênh trong SDK. Bạn có thể định cấu hình một kênh và chỉ định một mã nhận dạng duy nhất cho kênh đó 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 kênh; ví dụ: mục đó có thể có nhiều phụ đề (mỗi phụ đề cho một ngôn ngữ) hoặc nhiều luồng âm thanh thay thế (cho nhiều ngôn ngữ).

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 đa phương tiện, bạn cần cập nhật thuộc tính tracks của tập hợp đó. 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 trình 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 kênh đang hoạt động trong yêu cầu nội dung đa phương tiện activeTrackIds.

Bạn cũng có thể kích hoạt một hoặc nhiều bản nhạc đượ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 nhạc 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ể tuỳ ý chọn kênh hoặc kiểu đang hoạt động để đặt. 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 kênh âm thanh hoặc video khỏi nội dung nghe nhìn hiện tại, bạn chỉ cần đặt mediaInfo.tracks=null (một mảng trống) rồi tải lại nội dung nghe nhìn.

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

Cập nhật var activeTrackIds = [2, 3]; (đã hiển thị 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ụ đề 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 âm thanh văn bản.

Định kiểu cho kênh văn bản

TextTrackStyle là đối tượng đóng gói thông tin về kiểu của một bản nhạc văn bản. Sau khi tạo hoặc cập nhật đối tượng TextTrackStyle hiện có, bạn có thể áp dụng đối tượng đó cho mục nội dung đa phương tiệ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 lệnh gọi lại, thành công hoặc lỗi, đồng thời cập nhật người gửi ban đầu cho phù hợp.

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

Bạn có thể tạo kiểu cho các thành phần kiểu của bản nhạc văn bản sau:

Màu và độ mờ của 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ể sử dụng RemotePlayer và RemotePlayerController để đặt âm lượng của bộ thu.

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

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

Ứng dụng gửi phải đồng bộ hoá với ứng dụng nhận để giao diện người dùng của ứng dụng gửi luôn báo cáo âm lượng theo ứng dụng 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 trình gửi. Hãy xem phần Cập nhật trạng thái để biết thêm thông tin.
Ứng dụng 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/âm lượng nội dung nghe nhìn của thiết bị gửi khi ứng dụng tải trên thiết bị nhận.

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

Gửi thông báo đa phương tiện đến 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 thông báo SKIP_AD đến trình nhận:

// 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 trình gửi được kết nối với cùng một trình nhận, điều quan trọng là mỗi trình gửi phải biết về các thay đổi trên trình nhận ngay cả khi các thay đổi đó được bắt đầu từ các trình gửi khác.

Để đạt được mục tiê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ả trình gửi đã kết nối sẽ đượ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 trình gửi trong lệnh gọi lại. Trong trường hợp này, SDK của trình nhận 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ả trình gửi đã kết nối.

Chỉ báo tiến trình

Hầu hết các ứng dụng đều yêu cầu hiển thị vị trí phát cùng với chỉ báo tiến trình trên trình gửi. Các API Truyền phát sử dụng giao thức nội dung đa phương tiện Truyền phát để tối ưu hoá mức sử dụng 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. Để triển khai đúng cách chỉ báo tiến trình phát nội dung nghe nhìn bằng các API, hãy xem ứng dụng mẫu CastVideos-chrome.

Yêu cầu về CORS

Đối với nội dung truyền phát 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 có chứa các Bản nhạc. Nếu muốn bật tính năng Theo dõi cho nội dung nghe nhìn bất kỳ, bạn phải bật CORS cho cả luồng theo dõi 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ủ, sau đó bạn thêm một kênh phụ đề đơn giản, thì bạn sẽ không thể truyền trực tuyến nội dung nghe nhìn trừ phi bạn cập nhật máy chủ để thêm các tiêu đề CORS thích hợp.

Bạn cần các tiêu đề sau: Content-Type,Accept-Encoding và Range. Xin lưu ý rằng hai 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ể chưa cần đế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 miền thay vì ký tự đại diện.

Tiếp tục 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().

Bạn nên làm như sau:

Gọi loadMedia() để bắt đầu phiên
Lưu trữ sessionId cục bộ
Tham gia lại phiên bằng cách sử dụng biểu tượ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

Đây là phần kết thúc về các tính năng mà bạn có thể thêm vào ứng dụng Trình gửi web. Giờ đây, bạn có thể tạo ứng dụng trình gửi cho một nền tảng khác (Android hoặc iOS) hoặc tạo ứng dụng trình nhận.

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