จออัจฉริยะเป็นอุปกรณ์ที่มีฟังก์ชันการสัมผัสเพื่อให้แอปพลิเคชันตัวรับสัญญาณบนเว็บรองรับการควบคุมที่เปิดใช้การสัมผัส SDK ตัวรับเว็บมอบประสบการณ์ 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
B. MovieMediaMetadata.subtitle
หรือ GenericMediaMetadata.subtitle
ค. MovieMediaMetadata.title
หรือ GenericMediaMetadata.title
ฉ. 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
ข. MusicTrackMediaMetadata.albumName
ค. MusicTrackMediaMetadata.title
ง. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
หรือ MusicTrackMediaMetadata.composer
จ. MusicTrackMediaMetadata.images[0]
ชม. 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