นักพัฒนาซอฟต์แวร์ Cast สามารถเพิ่มรูปภาพให้ข้อมูล (รอง) ลงใน UI สำหรับแอปพลิเคชันเสียงและวิดีโอ ดูรูปแบบรูปภาพที่รองรับเพื่อดูความเข้ากันได้
รูปภาพรองจะปรากฏที่ด้านขวาบนของจอแสดงผล และสามารถใช้เพื่อแสดงกราฟิกที่มีข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่กำลังเล่นอยู่ เช่น รูปแบบเนื้อหา สัญญาณเรียกขานของสถานีวิทยุ หรือการจัดประเภทรายการทีวี รูปภาพรองจะยังคงอยู่บนหน้าจอตราบใดที่ฟีเจอร์ดังกล่าวเปิดอยู่สำหรับเนื้อหาปัจจุบันและโปรแกรมเล่นไม่อยู่ในสถานะไม่มีการใช้งาน
ตารางที่ 1 แสดงประสบการณ์ของผู้ใช้เมื่อเปิดใช้ฟีเจอร์ในประเภทอุปกรณ์และการควบคุมที่เกี่ยวข้อง รายละเอียดการใช้งานและการผสานรวมแตกต่างกันเล็กน้อยระหว่างแอปเสียงและวิดีโอ ดูส่วนด้านล่างเพื่อผสานรวมฟีเจอร์นี้ในแอปเว็บรีซีฟเวอร์
ประเภทอุปกรณ์ | เนื้อหาเสียง | เนื้อหาวิดีโอ |
---|---|---|
Chromecast | ||
Chromecast พร้อม Google TV | ||
จออัจฉริยะ | ||
รีโมตคอนโทรลของจออัจฉริยะ | หมายเหตุ: ไม่รองรับรูปภาพรองบนรีโมตคอนโทรลสำหรับเนื้อหาวิดีโอ |
เสียง
ภาพรวม
ส่วนรูปภาพที่รองของเนื้อหาเสียงนั้นขับเคลื่อนด้วยข้อมูลเมตาของเนื้อหาที่โหลด เมื่อโหลดรายการสื่อแล้ว การเปลี่ยนแปลงพร็อพเพอร์ตี้ secondaryImage
ของข้อมูลเมตาในภายหลังจะแสดงใน UI
หากใช้ Smart Display เป็นรีโมตคอนโทรลสำหรับเสียง รูปภาพรองจะปรากฏใน 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);
ขั้นตอนถัดไป
ส่วนนี้จะสรุปฟีเจอร์ที่คุณสามารถเพิ่มใน Web Receiver ได้ ตอนนี้คุณสามารถสร้างแอปผู้ส่งบน iOS, Android หรือเว็บได้แล้ว