เพิ่มประสิทธิภาพสําหรับจออัจฉริยะ

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

คู่มือนี้จะอธิบายวิธีเพิ่มประสิทธิภาพแอปพลิเคชันตัวรับสัญญาณเว็บเมื่อเปิดตัวบนจออัจฉริยะและวิธีปรับแต่งตัวควบคุมโปรแกรมเล่น

หมายเหตุ: การปรับแต่งนี้ต้องใช้องค์ประกอบ UI ของโปรแกรมเล่นในตัว cast-media-player การติดตามสถานะ UI, การสร้างแบรนด์ และการปรับแต่งอื่นๆ จะต้องดําเนินการด้วยตนเองหากไม่มีการใช้องค์ประกอบนี้

การเข้าถึงการควบคุม UI

ออบเจ็กต์การควบคุม UI สามารถเข้าถึงได้ด้วยรหัสต่อไปนี้

const controls = cast.framework.ui.Controls.getInstance();

หากไม่ได้ใช้เอลิเมนต์ cast-media-player คุณต้องตั้งค่าพร็อพเพอร์ตี้ touchScreenOptimizedApp เป็น true ใน UiConfig ในส่วน CastReceiverOptions

context.start({
  uiConfig: {
    touchScreenOptimizedApp: true
  }
});

UI วิดีโอเริ่มต้น

ระบบจะกําหนดปุ่มควบคุมเริ่มต้นให้กับแต่ละช่องโดยอิงตาม MetadataType และ MediaStatus.supportedMediaCommands

MetadataType.Movies, MetadataType.General

ก. --playback-logo-image

B. MovieMediaMetadata.subtitle หรือ GenericMediaMetadata.subtitle

ค. MovieMediaMetadata.title หรือ GenericMediaMetadata.title

ง. MediaStatus.currentTime

จ. MediaInformation.duration

ฉ. ControlsSlot.SLOT_SECONDARY_1

ช. ControlsSlot.SLOT_PRIMARY_1

ชม. เล่น/หยุดชั่วคราว

1. ControlsSlot.SLOT_PRIMARY_2

ญ. ControlsSlot.SLOT_SECONDARY_2

เมื่อค่าของ supportedMediaCommands เท่ากับ ALL_BASIC_MEDIA เลย์เอาต์การควบคุมเริ่มต้นจะแสดงดังนี้

เมื่อค่าของ supportedMediaCommands เท่ากับ ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT เลย์เอาต์การควบคุมเริ่มต้นจะแสดงดังนี้

เมื่อค่าของ supportedMediaCommands เท่ากับ PAUSE | QUEUE_PREV | QUEUE_NEXT เลย์เอาต์การควบคุมเริ่มต้นจะแสดงดังนี้

เมื่อมีแทร็กข้อความให้ใช้งาน ปุ่มคําบรรยายจะแสดงขึ้นที่ SLOT_SECONDARY_1 เสมอ

หากต้องการเปลี่ยนค่าของ supportedMediaCommands แบบไดนามิกหลังจากเริ่มต้นบริบทของผู้รับแล้ว คุณสามารถเรียกใช้ PlayerManager.setSupportedMediaCommands เพื่อลบล้างค่าได้ นอกจากนี้ คุณยังเพิ่มคําสั่งใหม่ได้โดยใช้ addSupportedMediaCommands หรือนําคําสั่งที่มีอยู่ออกโดยใช้ removeSupportedMediaCommands

UI เสียงเริ่มต้น

MetadataType.MUSIC_TRACK

ก. --playback-logo-image

ข. MusicTrackMediaMetadata.albumName

ค. MusicTrackMediaMetadata.title

ง. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist หรือ MusicTrackMediaMetadata.composer

จ. MusicTrackMediaMetadata.images[0]

ฉ. MediaStatus.currentTime

ช. MediaInformation.duration

ชม. ControlsSlot.SLOT_SECONDARY_1

1. ControlsSlot.SLOT_PRIMARY_1

ช. เล่น/หยุดชั่วคราว

ค. ControlsSlot.SLOT_PRIMARY_2

ลิตร ControlsSlot.SLOT_SECONDARY_2

เมื่อค่าของ supportedMediaCommands เท่ากับ ALL_BASIC_MEDIA เลย์เอาต์การควบคุมเริ่มต้นจะแสดงดังนี้

เมื่อค่าของ supportedMediaCommands เท่ากับ ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT เลย์เอาต์การควบคุมเริ่มต้นจะแสดงดังนี้

หากต้องการเปลี่ยนค่าของ supportedMediaCommands แบบไดนามิกหลังจากเริ่มต้นบริบทของผู้รับข้อมูลแล้ว คุณสามารถเรียกใช้ PlayerManager.setSupportedMediaCommands เพื่อลบล้างค่าได้ นอกจากนี้ยังเพิ่มคําสั่งใหม่ได้โดยใช้ addSupportedMediaCommands หรือนําคําสั่งที่มีอยู่ออกโดยใช้ removeSupportedMediaCommands

ปรับแต่งเลย์เอาต์ปุ่มควบคุม UI

การใช้เลย์เอาต์ที่กําหนดเองหากต้องการเปลี่ยนปุ่มในการควบคุม UI

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

const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();

จากนั้น คุณจะกําหนดปุ่มควบคุมให้กับช่องโฆษณาได้ 4 ช่องโดยเรียกใช้ assignButton

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_1,
  cast.framework.ui.ControlsButton.LIKE
)

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_2,
  cast.framework.ui.ControlsButton.DISLIKE
)

และเลย์เอาต์ที่กําหนดเองจะแสดงด้านล่าง

เมื่อ MediaStatus.supportedMediaCommands ยังไม่รองรับปุ่มที่กําหนด ปุ่มดังกล่าวจะเป็นสีเทา ตัวอย่างเช่น หาก supportedMediaCommands เท่ากับ ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE ระบบจะปิดใช้ปุ่ม QUEUE_PREV

หากต้องการเปลี่ยนค่าของ supportedMediaCommands แบบไดนามิกหลังจากเริ่มต้นบริบทของผู้รับข้อมูลแล้ว คุณสามารถเรียกใช้ PlayerManager.setSupportedMediaCommands เพื่อลบล้างค่าได้ นอกจากนี้ คุณยังเพิ่มคําสั่งใหม่ได้โดยใช้ addSupportedMediaCommands หรือนําคําสั่งที่มีอยู่ออกโดยใช้ removeSupportedMediaCommands

รูปภาพรอง

รูปภาพรองช่วยให้นักพัฒนาซอฟต์แวร์มีความยืดหยุ่นเกี่ยวกับการเพิ่มรูปภาพที่ให้ข้อมูลลงใน UI สําหรับแอปพลิเคชันเสียงและวิดีโอ เพื่อแสดงโลโก้หรือช่องทางสื่อในเครื่อง เช่น ฟังก์ชันการทํางานใหม่นี้จะมีค่าใช้จ่ายส่วนเกินมากในขณะที่รักษา UI ที่สอดคล้องกันในแพลตฟอร์มการแคสต์ต่างๆ เช่น Chromecast, Smart Display และ Chromecast ที่มี Google TV