รูปภาพรอง

นักพัฒนาซอฟต์แวร์ของ Cast เพิ่มรูปภาพที่ให้ข้อมูล (รอง) ลงใน UI สําหรับแอปพลิเคชันเสียงและวิดีโอได้ ดูความเข้ากันได้กับรูปแบบรูปภาพที่รองรับ

รูปภาพรองจะปรากฏที่ด้านขวาบนของจอแสดงผล และใช้เพื่อแสดงกราฟิกที่มีข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่กําลังเล่นอยู่ได้ เช่น รูปแบบเนื้อหา สัญลักษณ์สถานีวิทยุ หรือการจัดประเภทรายการทีวี ภาพรองยังคงอยู่บนหน้าจอตราบใดที่ยังคงเปิดใช้ฟีเจอร์สําหรับเนื้อหาปัจจุบันและโปรแกรมเล่นไม่ได้อยู่ในสถานะไม่มีความเคลื่อนไหว

ตารางที่ 1 แสดงประสบการณ์ของผู้ใช้เมื่อเปิดใช้ฟีเจอร์ในประเภทอุปกรณ์และตัวควบคุมที่เกี่ยวข้อง รายละเอียดการใช้งานและการผสานรวมจะแตกต่างกันระหว่างแอปเสียงและวิดีโอ ดูหัวข้อด้านล่างเพื่อผสานรวมฟีเจอร์นี้ในแอปตัวรับเว็บ

ตารางที่ 1: UI ของรูปภาพรองตามเนื้อหาและประเภทอุปกรณ์

ประเภทอุปกรณ์	เนื้อหาเสียง	เนื้อหาวิดีโอ
Chromecast
Chromecast ที่มี Google TV
Smart Display
รีโมทควบคุมจออัจฉริยะ		หมายเหตุ: รีโมตคอนโทรลสําหรับเนื้อหาวิดีโอไม่รองรับรูปภาพรอง

เสียง

ภาพรวม

รูปภาพรองของเนื้อหาเสียงขับเคลื่อนโดยข้อมูลเมตาของเนื้อหาที่โหลด เมื่อโหลดรายการสื่อแล้ว การเปลี่ยนแปลงต่อในพร็อพเพอร์ตี้ secondaryImage ของข้อมูลเมตาจะปรากฏใน UI

หากใช้ Smart Display เป็นรีโมตคอนโทรลสําหรับเสียง รูปภาพรองจะปรากฏใน UI ของ Smart Display เมื่อตั้งค่าด้วย

หมายเหตุ: เราขอแนะนําให้นักพัฒนาซอฟต์แวร์ Cast ใช้ UI เสียงเริ่มต้นที่ระบุไว้ในองค์ประกอบ <cast-media-player> ของตัวรับสัญญาณของเว็บ การใช้ UI เริ่มต้นช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่สอดคล้องกันทั้งใน Chromecast, Smart Display และ Chromecast ที่มี Google TV โดยที่ไม่ต้องเสียค่าบริการใดๆ แอปที่ใช้ UI ที่กําหนดเองไม่รองรับฟีเจอร์รูปภาพรอง การดําเนินการนี้จะไม่มีผลกับรีโมตคอนโทรล เนื่องจากกล้องแสดงรูปภาพรองเสมอเมื่อมีการตั้งค่า

การใช้งาน

หากต้องการตั้งค่า นําออก หรืออัปเดตรูปภาพรอง คุณต้องแก้ไขพร็อพเพอร์ตี้ secondaryImage ของ MusicTrackMediaMetadata พร็อพเพอร์ตี้จะใช้ออบเจ็กต์ Image ที่มี URL ที่อธิบายตําแหน่งของรูปภาพรอง

ในตัวอย่างด้านล่าง รูปภาพรองมีการตั้งค่าในสกัดกั้น load เมื่อโปรแกรมเล่นโหลดเนื้อหาเสร็จแล้ว รูปภาพรองจะปรากฏขึ้น

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

หากต้องการอัปเดตรูปภาพรองในระหว่างการเล่น แอปพลิเคชันควรใช้ PlayerManager เพื่อรับ MediaInformation โดยการเรียกใช้ getMediaInformation แอปพลิเคชันควรแก้ไข metadata โดยการอัปเดตพร็อพเพอร์ตี้ secondaryImage เป็นค่าที่ต้องการ และสุดท้าย การเรียกใช้setMediaInformation ด้วยข้อมูลใหม่จะอัปเดต UI วิธีนี้ใช้จัดการกับการเปลี่ยนแปลงข้อมูลเมตาที่ให้ไว้ผ่านการอัปเดต เช่น EMSG หรือ ID3 เหตุการณ์ระหว่างการเล่นได้

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

หากต้องการยกเลิกการตั้งค่ารูปภาพรอง ให้ตั้งค่าพร็อพเพอร์ตี้ secondaryImage เป็น Null ในออบเจ็กต์ข้อมูลเมตา

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

วิดีโอ

ภาพรวม

สําหรับเนื้อหาวิดีโอ ระบบจะตั้งค่าและนํารูปภาพรองออกโดยใช้ UiManager รูปภาพรองแสดงพร้อมกับการวางซ้อนการควบคุมวิดีโอ

การใช้งาน

หากต้องการตั้งค่ารูปภาพรอง แอปพลิเคชันต้องได้รับอินสแตนซ์ของ UiManager และเรียก setSecondaryImage โดยใช้ 2 พารามิเตอร์คือ SecondaryImagePosition และ URL ของรูปภาพ คุณตั้งค่ารูปภาพรองได้ทุกเมื่อ แต่จะแสดงเมื่อผู้ใช้ทริกเกอร์การวางซ้อนให้อยู่เบื้องหน้าเท่านั้น

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

การนํารูปภาพรองออกคือการตั้งค่า URL ของรูปภาพเป็น null หรือสตริงเปล่า

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

ขั้นตอนถัดไป

ซึ่งเป็นการสรุปฟีเจอร์ที่คุณสามารถเพิ่มไปยังตัวรับสัญญาณของเว็บได้ ตอนนี้คุณสร้างแอปผู้ส่งใน iOS, Android หรือ Web ได้แล้ว