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

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

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

การเข้าถึงการควบคุม 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.Movie, MetadataType.ทั่วไป

ก. --playback-logo-image

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

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

ง. MediaStatus.currentTime

จ. MediaInformation.duration

ฉ. ControlsSlot.SLOT_SECONDARY_1

ช. ControlsSlot.SLOT_PRIMARY_1

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

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

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

จ. MusicTrackMediaMetadata.images[0]

ฉ. MediaStatus.currentTime

ช. MediaInformation.duration

ซ. ControlsSlot.SLOT_SECONDARY_1

1. ControlsSlot.SLOT_PRIMARY_1

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

K. 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 ให้สอดคล้องกันในแพลตฟอร์มจอแสดงผล ของ Cast ต่างๆ ได้แก่ Chromecast, Smart Display และ Chromecast พร้อม Google TV