Truyền nội dung đa phương tiện (CMB) là tính năng cho phép người dùng hiển thị thông minh khám phá và tương tác với danh mục nội dung video hoặc âm thanh của bạn. CMB làm được điều này bằng cách nâng cao Trình nhận web bằng trải nghiệm duyệt tinh giản được điều chỉnh đặc biệt cho màn hình thông minh.
CMB xác định các mẫu chuẩn sẽ mang lại trải nghiệm duyệt web nhất quán, tuân theo quy ước giao diện người dùng hiển thị thông minh. Nhà phát triển cung cấp dữ liệu để điền vào các mẫu chuẩn hóa này. Các mẫu hỗ trợ cả nội dung âm thanh và video hoặc kết hợp cả hai.
Điểm truy cập
Có hai điểm truy cập cho CMB, trong đó người dùng có thể duyệt xem và chọn nội dung bằng cách chạm hoặc điều khiển bằng giọng nói.
Duyệt trong trình phát
Vuốt lên trong khi phát để chọn trong danh sách nội dung do ứng dụng cung cấp:
Video
Âm thanh
Duyệt trang đích
Khi Bộ thu web có phần tử cast-media-player đang chạy trên Màn hình
thông minh, nó sẽ hiển thị CMB khi ở trạng thái IDLE.
Video và âm thanh
Đang điền nội dung
Nhà phát triển có trách nhiệm điền mẫu cho từng điểm truy cập với dữ liệu cho từng mục nội dung. Nội dung dùng để điền thông tin vào Trình phát trong trình phát có thể khác với nội dung dùng để điền thông tin Duyệt trang đích.
Sử dụng tính năng Duyệt trong trình phát để hiển thị các mục có liên quan đến nội dung mà người dùng hiện đang phát hoặc các mục trong danh sách phát. Các nhà cung cấp dịch vụ truyền hình trực tiếp cũng có thể sử dụng điểm truy cập này để điền danh sách kênh để dễ dàng truy cập.
Sử dụng tính năng Duyệt trang đích để nâng cao mức độ nhận biết về nội dung gốc mới, nội dung hiện đang hoạt động hoặc nội dung mà người dùng của bạn có thể quan tâm hơn nữa.
Bật tính năng Duyệt qua nội dung nghe nhìn
Cung cấp danh sách nội dung đa phương tiện để duyệt web bằng cách gọi setBrowseContent:
const controls = cast.framework.ui.Controls.getInstance(); controls.setBrowseContent(BrowseContent);
Giao diện người dùng Duyệt qua nội dung nghe nhìn được cập nhật ngay sau khi gọi phương thức này.
Chiều cao vùng an toàn
Khi CMB được bật, chiều cao của khu vực an toàn trên giao diện người dùng SDK của Cast sẽ thay đổi và bạn có thể
cần cập nhật giao diện người dùng Web receiver hiện có. Sử dụng getSafeAreaHeight để xác định chiều cao của vùng an toàn.
// Media Browse UI enabled controls.setBrowseContent(BrowseContent); console.log(controls.getSafeAreaHeight()); // 338px on Google Nest Hub // Media Browse UI disabled controls.setBrowseContent(null); console.log(controls.getSafeAreaHeight()); // 408px on Google Nest Hub
Xóa duyệt qua nội dung nghe nhìn
Để xoá giao diện người dùng Duyệt qua nội dung đa phương tiện, hãy sử dụng null với setBrowseContent:
controls.setBrowseContent(null);
Tùy chỉnh trình duyệt nội dung nghe nhìn
Duyệt xem nội dung
Sử dụng
BrowseContent
để tuỳ chỉnh tiêu đề của giao diện người dùng Duyệt qua nội dung nghe nhìn và cập nhật các mục:
Sử dụng
BrowseItem
để hiển thị tiêu đề, tiêu đề phụ, thời lượng và hình ảnh của mỗi mục trong giao diện người dùng Duyệt qua nội dung nghe nhìn:
Tỷ lệ khung hình
Sử dụng targetAspectRatio để chọn tỷ lệ khung hình tốt nhất cho tài sản hình ảnh của bạn. Ba loại tỷ lệ khung hình được
SDK bộ thu web hỗ trợ:
| Tỷ lệ khung hình | Ví dụ: |
|---|---|
SQUARE_1_TO_1 |
 |
PORTRAIT_2_TO_3 |
 |
LANDSCAPE_16_TO_9 |
 |
Tin nhắn
Khi người dùng chọn một trong các mục từ giao diện người dùng Duyệt qua nội dung phương tiện, SDK
Bộ thu web sẽ gửi thông báo LOAD đến ứng dụng theo
các giá trị của BrowseItem đã chọn.
Mã mẫu
const controls = cast.framework.ui.Controls.getInstance();
const item1 = new cast.framework.ui.BrowseItem();
item1.title = 'Title 1';
item1.subtitle = 'Subtitle 1';
item1.duration = 300;
item1.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item1.image = new cast.framework.messages.Image('1.jpg');
item1.entity = 'example://gizmos/1';
const item2 = new cast.framework.ui.BrowseItem();
item2.title = 'Title 2';
item2.subtitle = 'Subtitle 2';
item2.duration = 100;
item2.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item2.image = new cast.framework.messages.Image('2.jpg');
item2.entity = 'example://gizmos/2';
const items = [item1, item2];
const browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = items;
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
(e) => {
// Media browse
controls.setBrowseContent(browseContent);
});
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, loadRequestData => {
if (loadRequestData.media && loadRequestData.media.entity) {
// Load by entity
loadRequestData.media.contentId = entityToId(loadRequestData.media.entity);
loadRequestData.media.contentUrl = entityToUrl(loadRequestData.media.entity);
}
return loadRequestData;
});