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
B. MovieMediaMetadata.subtitle
hoặc GenericMediaMetadata.subtitle
.
C. MovieMediaMetadata.title
hoặc GenericMediaMetadata.title
.
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
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
hoặc MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
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.