การเรียกดูสื่อ

การเรียกดูสื่อ (CMB) เป็นฟีเจอร์ที่ช่วยให้ผู้ใช้ Smart Display ค้นพบและมีส่วนร่วมกับแคตตาล็อกเนื้อหาเสียงหรือวิดีโอของคุณได้ CMB ปรับปรุง โดยปรับปรุงตัวรับสัญญาณเว็บด้วยประสบการณ์การท่องเว็บที่มีประสิทธิภาพซึ่งปรับแต่งมาเป็นพิเศษสําหรับ Smart Display

CMB กําหนดเทมเพลตมาตรฐานซึ่งให้ประสบการณ์การท่องเว็บที่สอดคล้องกันและสอดคล้องกับรูปแบบ UI ของ Smart Display นักพัฒนาซอฟต์แวร์ให้ข้อมูลเพื่อสร้าง เทมเพลตมาตรฐานเหล่านี้ เทมเพลตรองรับทั้งเสียงและวิดีโอ และการผสมผสานเนื้อหา

จุดแรกเข้า

จุดแรกเข้าสําหรับ CMB มี 2 จุดด้วยกันที่ผู้ใช้สามารถเรียกดูและเลือกเนื้อหาโดยใช้การควบคุมด้วยการสัมผัสหรือเสียง

การเรียกดูในโปรแกรมเล่น

ปัดขึ้นระหว่างการเล่นเพื่อเลือกจากรายการเนื้อหาที่แอปพลิเคชันระบุไว้

วิดีโอ

รายการการเรียกดูสื่อ - ในโปรแกรมเล่นวิดีโอ 1 รายการการเรียกดูสื่อ - ในโปรแกรมเล่นวิดีโอ 2

เสียง

รายการการเรียกดูสื่อ - ในโปรแกรมเล่นเสียง 1 รายการการเรียกดูสื่อ - ในโปรแกรมเล่นเสียง 2

เรียกดูหน้า Landing Page

เมื่อตัวรับเว็บที่มีเอลิเมนต์ cast-media-player ทํางานอยู่ใน Smart Display จะแสดง CMB ขณะที่อยู่ในสถานะ IDLE

วิดีโอและเสียง

รายการเรียกดูสื่อ - วิดีโอหน้า Landing Page รายการเรียกดูสื่อ - เสียงหน้า Landing Page

กำลังเพิ่มเนื้อหา

นักพัฒนาซอฟต์แวร์มีหน้าที่ป้อนข้อมูลเทมเพลตสําหรับจุดเข้าแต่ละจุดด้วยข้อมูลสําหรับรายการเนื้อหาแต่ละรายการ เนื้อหาที่ใช้ป้อนข้อมูลในการเรียกดูในโปรแกรมเล่นอาจต่างจากเนื้อหาที่ใช้ป้อนข้อมูลการเรียกดูหน้า 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 การเรียกดูสื่อและอัปเดตรายการ

การเรียกดูสื่อ - เรียกดูเนื้อหา

ก. BrowseContent.title

ข. BrowseContent.items

ใช้ BrowseItem เพื่อแสดงชื่อ ชื่อรอง ระยะเวลา และรูปภาพสําหรับแต่ละรายการใน UI การเรียกดูสื่อ

การเรียกดูสื่อ - เรียกดูรายการ

ก. BrowseItem.image

ข. BrowseItem.duration

ค. BrowseItem.title

ง. BrowseItem.subtitle

อัตราส่วน

ใช้ 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;
  });