Tối ưu hóa cho Màn hình thông minh

Màn hình thông minh là thiết bị có chức năng cảm ứng để cho phép các ứng dụng của Bộ thu web hỗ trợ các chức năng điều khiển bằng thao tác chạm. SDK Bộ thu web cung cấp trải nghiệm giao diện người dùng mặc định, tuỳ chỉnh thêm các tuỳ chọn điều khiển trình phát.

Hướng dẫn này giải thích cách tối ưu hoá ứng dụng Web receiver khi khởi chạy trên màn hình thông minh và cách tuỳ chỉnh các nút điều khiển trình phát.

Truy cập vào các thành phần điều khiển trên giao diện người dùng

Bạn có thể truy cập vào đối tượng Giao diện người dùng bằng mã sau:

const controls = cast.framework.ui.Controls.getInstance();

Nếu không sử dụng phần tử cast-media-player, bạn cần đặt thuộc tính touchScreenOptimizedApp thành true trong UiConfig trong CastReceiverOptions.

context.start({
  uiConfig: {
    touchScreenOptimizedApp: true
  }
});

Giao diện người dùng mặc định của video

Các nút điều khiển mặc định được gán cho từng khe dựa trên MetadataType và MediaStatus.supportedMediaCommands.

MetadataType.Movie, MetadataType.generic

Đáp: --playback-logo-image

B. MovieMediaMetadata.subtitle hoặc GenericMediaMetadata.subtitle.

C. MovieMediaMetadata.title hoặc GenericMediaMetadata.title.

D. MediaStatus.currentTime

E. MediaInformation.duration

F. ControlsSlot.SLOT_SECONDARY_1

G. ControlsSlot.SLOT_PRIMARY_1

C. Phát/Tạm dừng

I. ControlsSlot.SLOT_PRIMARY_2

J. ControlsSlot.SLOT_SECONDARY_2

Khi giá trị của supportedMediaCommands bằng ALL_BASIC_MEDIA, bố cục điều khiển mặc định sẽ hiển thị như sau:

Khi giá trị của supportedMediaCommands bằng với ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, bố cục điều khiển mặc định sẽ hiển thị như sau:

Khi giá trị của supportedMediaCommands bằng với PAUSE | QUEUE_PREV | QUEUE_NEXT, bố cục điều khiển mặc định sẽ hiển thị như bên dưới:

Khi có bản phụ đề văn bản, nút phụ đề sẽ luôn xuất hiện tại SLOT_SECONDARY_1.

Để linh động thay đổi giá trị của supportedMediaCommands sau khi bắt đầu ngữ cảnh trình nhận, bạn có thể gọi PlayerManager.setSupportedMediaCommands để ghi đè giá trị đó. Ngoài ra, bạn có thể thêm lệnh mới bằng cách dùng addSupportedMediaCommands hoặc xoá lệnh hiện có bằng removeSupportedMediaCommands.

Giao diện người dùng âm thanh mặc định

TypeType.MUSIC_TRACK

Đáp: --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist hoặc MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. ControlsSlot.SLOT_SECONDARY_1

I. ControlsSlot.SLOT_PRIMARY_1

J. Phát/Tạm dừng

Số ControlsSlot.SLOT_PRIMARY_2

Trái. ControlsSlot.SLOT_SECONDARY_2

Khi giá trị của supportedMediaCommands bằng ALL_BASIC_MEDIA, bố cục điều khiển mặc định sẽ hiển thị như sau:

Khi giá trị của supportedMediaCommands bằng ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, bố cục điều khiển mặc định sẽ hiển thị như bên dưới:

Để linh động thay đổi giá trị của supportedMediaCommands sau khi bắt đầu ngữ cảnh Bộ thu web, bạn có thể gọi PlayerManager.setSupportedMediaCommands để ghi đè giá trị đó. Ngoài ra, bạn có thể thêm các lệnh mới bằng cách sử dụng addSupportedMediaCommands hoặc xoá các lệnh hiện có bằng removeSupportedMediaCommands.

Tuỳ chỉnh bố cục nút điều khiển trên giao diện người dùng

Sử dụng bố cục tuỳ chỉnh nếu bạn muốn thay đổi các nút trong thành phần điều khiển trên giao diện người dùng.

const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();

Sau đó, bạn có thể gán các nút điều khiển cho 4 khe bằng cách gọi assignButton.

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_1,
  cast.framework.ui.ControlsButton.LIKE
)

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_2,
  cast.framework.ui.ControlsButton.DISLIKE
)

Và bố cục tùy chỉnh sẽ hiển thị như sau:

Khi nút được gán không được hỗ trợ trong MediaStatus.supportedMediaCommands, nút này sẽ chuyển sang màu xám. Ví dụ: nếu supportedMediaCommands bằng ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE, thì nút QUEUE_PREV sẽ bị tắt.

Để linh động thay đổi giá trị của supportedMediaCommands sau khi bắt đầu ngữ cảnh Bộ thu web, bạn có thể gọi PlayerManager.setSupportedMediaCommands để ghi đè giá trị đó. Ngoài ra, bạn có thể thêm các lệnh mới bằng cách sử dụng addSupportedMediaCommands hoặc xoá các lệnh hiện có bằng cách sử dụng removeSupportedMediaCommands.

Hình ảnh phụ

Hình ảnh phụ cho phép nhà phát triển Truyền linh hoạt thêm hình ảnh thông tin vào giao diện người dùng cho các ứng dụng âm thanh và video, để hiển thị biểu trưng kênh hoặc định dạng nội dung nghe nhìn cục bộ. Chức năng mới này được cung cấp với rất ít chi phí vận hành, trong khi vẫn duy trì giao diện người dùng nhất quán trên các nền tảng hiển thị nội dung truyền: Chromecast, màn hình thông minh và Chromecast có Google TV.

Trước
Định kiểu cho trình phát
Tiếp
Duyệt qua nội dung nghe nhìn