الشاشات الذكية هي أجهزة مزودة بوظيفة اللمس للسماح لتطبيقات مستقبل الويب بدعم عناصر التحكم الممكّنة باللمس. توفر SDK لمتلقي الويب تجربة واجهة مستخدم افتراضية مع تخصيص إضافي لعناصر التحكم في المشغل.
يشرح هذا الدليل كيفية تحسين تطبيق "مستقبل الويب" عند تشغيله على الشاشات الذكية وكيفية تخصيص عناصر التحكم في المشغل.
الوصول إلى عناصر التحكم في واجهة المستخدم
يمكن الوصول إلى كائن عناصر تحكم واجهة المستخدم بالشفرة التالية:
const controls = cast.framework.ui.Controls.getInstance();
إذا كنت لا تستخدم عنصر cast-media-player
، عليك ضبط السمة touchScreenOptimizedApp
على true
في UiConfig
ضمن CastReceiverOptions
.
context.start({
uiConfig: {
touchScreenOptimizedApp: true
}
});
واجهة مستخدم الفيديو التلقائية
يتم تخصيص أزرار التحكُّم التلقائية لكل فتحة بناءً على MetadataType
وMediaStatus.supportedMediaCommands
.
MetadataType.Movie وMetadataType.Generic
(ب). 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
.
واجهة مستخدم الصوت التلقائية
نوع البيانات الوصفية: 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
.
تخصيص تنسيق زر التحكم في واجهة المستخدم
استخدام تنسيق مخصص إذا كنت تريد تغيير الأزرار في عناصر التحكم في واجهة المستخدم.
const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();
بعد ذلك، يمكنك تخصيص أزرار التحكم لأربعة خانات عن طريق الاتصال بـ 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
.
صورة ثانوية
تمنح الصورة الثانوية مطوّري برامج Cast مرونة إضافة صورة معلوماتية إلى واجهة المستخدم لتطبيقات الصوت والفيديو، لعرض شعارات القنوات المحلية أو تنسيق الوسائط على سبيل المثال. يتم توفير هذه الوظيفة الجديدة مع القليل من النفقات العامة مع الاحتفاظ بواجهة مستخدم ثابتة عبر الأنظمة الأساسية المختلفة لعرض Cast: Chromecast والشاشات الذكية وChromecast مع Google TV.