การเรียกดูสื่อ (CMB) เป็นฟีเจอร์ที่ช่วยให้ผู้ใช้ Smart Display ค้นพบและมีส่วนร่วมกับแคตตาล็อกเนื้อหาเสียงหรือวิดีโอของคุณได้ CMB ปรับปรุง โดยปรับปรุงตัวรับสัญญาณเว็บด้วยประสบการณ์การท่องเว็บที่มีประสิทธิภาพซึ่งปรับแต่งมาเป็นพิเศษสําหรับ Smart Display
CMB กําหนดเทมเพลตมาตรฐานซึ่งให้ประสบการณ์การท่องเว็บที่สอดคล้องกันและสอดคล้องกับรูปแบบ UI ของ Smart Display นักพัฒนาซอฟต์แวร์ให้ข้อมูลเพื่อสร้าง เทมเพลตมาตรฐานเหล่านี้ เทมเพลตรองรับทั้งเสียงและวิดีโอ และการผสมผสานเนื้อหา
จุดแรกเข้า
จุดแรกเข้าสําหรับ CMB มี 2 จุดด้วยกันที่ผู้ใช้สามารถเรียกดูและเลือกเนื้อหาโดยใช้การควบคุมด้วยการสัมผัสหรือเสียง
การเรียกดูในโปรแกรมเล่น
ปัดขึ้นระหว่างการเล่นเพื่อเลือกจากรายการเนื้อหาที่แอปพลิเคชันระบุไว้
วิดีโอ
เสียง
เรียกดูหน้า Landing Page
เมื่อตัวรับเว็บที่มีเอลิเมนต์ cast-media-player
ทํางานอยู่ใน Smart Display จะแสดง CMB ขณะที่อยู่ในสถานะ IDLE
วิดีโอและเสียง
กำลังเพิ่มเนื้อหา
นักพัฒนาซอฟต์แวร์มีหน้าที่ป้อนข้อมูลเทมเพลตสําหรับจุดเข้าแต่ละจุดด้วยข้อมูลสําหรับรายการเนื้อหาแต่ละรายการ เนื้อหาที่ใช้ป้อนข้อมูลในการเรียกดูในโปรแกรมเล่นอาจต่างจากเนื้อหาที่ใช้ป้อนข้อมูลการเรียกดูหน้า Landing Page
ใช้การเรียกดูในโปรแกรมเล่นเพื่อแสดงรายการที่เกี่ยวข้องกับเนื้อหาที่ผู้ใช้กําลังเล่นอยู่หรือรายการเพลย์ลิสต์ นอกจากนี้ ผู้ให้บริการรายการทีวีสดยังสามารถใช้จุดแรกเริ่มนี้ เพื่อสร้างรายการช่องเพื่อให้เข้าถึงง่าย
ใช้การเรียกดูหน้า Landing Page เพื่อเพิ่มการรับรู้เกี่ยวกับเนื้อหาต้นฉบับใหม่ๆ เนื้อหาที่เผยแพร่อยู่ในขณะนี้ หรือเนื้อหาที่ผู้ใช้อาจสนใจเพิ่มเติม
เปิดใช้งานการเรียกดูสื่อ
ระบุเนื้อหาสื่อสําหรับการเรียกดูโดยโทรไปที่ setBrowseContent
ดังนี้
const controls = cast.framework.ui.Controls.getInstance(); controls.setBrowseContent(BrowseContent);
UI การเรียกดูสื่อจะมีการอัปเดตทันทีหลังจากเรียกวิธีนี้
ความสูงของพื้นที่ปลอดภัย
เมื่อเปิดใช้ CMB แล้ว ความสูงของพื้นที่ปลอดภัยที่ใช้ UI ของ Cast SDK จะเปลี่ยนแปลง และคุณอาจต้องอัปเดต UI ตัวรับสัญญาณของเว็บที่มีอยู่ ใช้ getSafeAreaHeight
เพื่อระบุความสูงของพื้นที่ปลอดภัย
// 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
นําการเรียกดูสื่อออก
หากต้องการนํา UI การเรียกดูสื่อออก ให้ใช้ null
กับ setBrowseContent
ดังนี้
controls.setBrowseContent(null);
ปรับแต่งการเรียกดูสื่อ
การเรียกดูเนื้อหา
ใช้ BrowseContent
เพื่อปรับแต่งชื่อของ UI การเรียกดูสื่อและอัปเดตรายการ
ใช้ BrowseItem
เพื่อแสดงชื่อ ชื่อรอง ระยะเวลา และรูปภาพสําหรับแต่ละรายการใน UI การเรียกดูสื่อ
อัตราส่วน
ใช้ targetAspectRatio
เพื่อเลือกสัดส่วนภาพที่ดีที่สุดสําหรับเนื้อหารูปภาพ ตัวรับสัญญาณเว็บรองรับสัดส่วนภาพ 3 แบบ ดังนี้
อัตราส่วน | ตัวอย่าง |
---|---|
SQUARE_1_TO_1 |
|
PORTRAIT_2_TO_3 |
|
LANDSCAPE_16_TO_9 |
Messages
เมื่อผู้ใช้เลือกรายการจาก UI การเรียกดูสื่อ SDK ตัวรับสัญญาณอุปกรณ์จะส่งข้อความ LOAD
ไปยังแอปพลิเคชันตามค่าของ BrowseItem
ที่เลือก
รหัสตัวอย่าง
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;
});