Hình ảnh phụ

Nhà phát triển tính năng truyền có thể thêm hình ảnh thông tin (phụ) vào giao diện người dùng cho các ứng dụng âm thanh và video. Xem các định dạng hình ảnh được hỗ trợ để biết khả năng tương thích.

Hình ảnh phụ xuất hiện ở trên cùng bên phải màn hình và có thể dùng để hiển thị đồ hoạ kèm theo thông tin bổ sung về nội dung đang phát, chẳng hạn như định dạng nội dung, ký hiệu cuộc gọi của đài phát thanh hoặc mức phân loại chương trình truyền hình. Hình ảnh phụ sẽ vẫn hiển thị trên màn hình miễn là tính năng này được bật cho nội dung hiện tại và trình phát không ở trạng thái rảnh.

Bảng 1 cho thấy trải nghiệm của người dùng khi tính năng này được bật trên các loại thiết bị và chế độ điều khiển có thể áp dụng. Thông tin chi tiết về quá trình triển khai và tích hợp có đôi chút khác biệt giữa ứng dụng âm thanh và video. Xem các phần dưới đây để tích hợp tính năng này trong ứng dụng Web receiver của bạn.

Bảng 1: Giao diện người dùng của hình ảnh phụ theo nội dung và loại thiết bị
Loại thiết bị Nội dung âm thanh Nội dung video
Chromecast Hình ảnh phụ trên thiết bị phần cứng Chromecast cho nội dung âm thanh. Hình ảnh phụ trên thiết bị phần cứng Chromecast dành cho nội dung video.
Chromecast có Google TV Hình ảnh phụ trên Chromecast có thiết bị phần cứng Google TV cho nội dung âm thanh. Hình ảnh phụ trên Chromecast có thiết bị phần cứng Google TV cho nội dung video.
Màn hình thông minh Hình ảnh phụ trên màn hình thông minh cho nội dung âm thanh. Hình ảnh phụ trên màn hình thông minh cho nội dung video.
Điều khiển từ xa màn hình thông minh Hình ảnh phụ trên điều khiển từ xa của màn hình thông minh cho nội dung âm thanh. Lưu ý: Hình ảnh phụ không được hỗ trợ trên điều khiển từ xa cho nội dung video.

Âm thanh

Tổng quan

Hình ảnh phụ cho nội dung âm thanh dựa trên siêu dữ liệu của nội dung đã tải. Sau khi mục nội dung đa phương tiện được tải, mọi thay đổi tiếp theo đối với thuộc tính secondaryImage của siêu dữ liệu đều được phản ánh trong giao diện người dùng.

Nếu màn hình thông minh được dùng làm điều khiển từ xa cho âm thanh, thì hình ảnh phụ cũng sẽ xuất hiện trên giao diện người dùng của màn hình thông minh khi được thiết lập.

Triển khai

Để đặt, xoá hoặc cập nhật hình ảnh phụ, bạn cần sửa đổi thuộc tính secondaryImage của MusicTrackMediaMetadata. Thuộc tính này sẽ lấy đối tượng Image được điền sẵn URL mô tả nơi lưu trữ hình ảnh phụ.

Trong mẫu bên dưới, hình ảnh phụ được đặt trong thực thể chặn load. Khi trình phát tải xong nội dung, hình ảnh phụ sẽ xuất hiện.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

Để cập nhật hình ảnh phụ trong khi phát, ứng dụng phải sử dụng PlayerManager để lấy MediaInformation bằng cách gọi getMediaInformation. Sau đó, ứng dụng sẽ sửa đổi metadata bằng cách cập nhật thuộc tính secondaryImage thành giá trị mong muốn. Cuối cùng, việc gọisetMediaInformation với thông tin mới sẽ cập nhật giao diện người dùng. Bạn có thể dùng phương thức này để xử lý các thay đổi trong siêu dữ liệu được cung cấp thông qua các bản cập nhật như các sự kiện EMSG hoặc ID3 trong khi phát.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

Để huỷ đặt hình ảnh phụ, hãy đặt thuộc tính secondaryImage thành rỗng trên đối tượng siêu dữ liệu.

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

Video

Tổng quan

Đối với nội dung video, hình ảnh phụ được đặt và xoá bằng UiManager. Hình ảnh phụ được hiển thị với lớp phủ điều khiển video.

Triển khai

Để đặt hình ảnh phụ, ứng dụng phải nhận một thực thể của UiManager và gọi setSecondaryImage. Phương thức này nhận 2 tham số: SecondaryImagePosition và URL của hình ảnh. Bạn có thể thiết lập hình ảnh phụ bất cứ lúc nào nhưng hình ảnh này sẽ chỉ hiển thị khi người dùng kích hoạt lớp phủ để chuyển sang nền trước.

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

Bạn có thể xoá hình ảnh thứ hai bằng cách đặt URL hình ảnh thành null hoặc một chuỗi trống.

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

Các bước tiếp theo

Đến đây, bạn đã trình bày xong các tính năng mà bạn có thể thêm vào Bộ thu web của mình. Giờ đây, bạn có thể tạo ứng dụng của người gửi trên iOS, Android hoặc Web.

Trước
Trực tiếp
Tiếp
Trình ghi nhật ký gỡ lỗi truyền