يمكن لمطوّري برامج البث إضافة صورة معلوماتية (ثانوية) إلى واجهة المستخدم لتطبيقات الصوت والفيديو. عليك الاطّلاع على تنسيقات الصور المتوافقة للتأكّد من توافقها.
تظهر الصورة الثانوية في أعلى يسار شاشة العرض، ويمكن استخدامها لعرض رسم بياني مع معلومات إضافية عن المحتوى الذي يتم تشغيله حاليًا، مثل تنسيق المحتوى أو رمز نداء المحطة الإذاعية أو تقييم البرنامج التلفزيوني. يستمر ظهور الصورة الثانوية على الشاشة طالما تم تفعيل ميزة المحتوى الحالي والمشغّل ليس في حالة عدم النشاط.
يعرض الجدول 1 تجربة المستخدم عند تفعيل الميزة على أنواع الأجهزة وعناصر التحكّم السارية. تختلف تفاصيل التنفيذ والدمج قليلاً بين تطبيقات الصوت والفيديو. راجِع الأقسام أدناه لدمج هذه الميزة في تطبيق Web واجهة برمجة التطبيقات.
نوع الجهاز | المحتوى الصوتي | محتوى الفيديو |
---|---|---|
Chromecast | ||
Chromecast مع Google TV | ||
شاشة ذكية | ||
وحدة تحكّم عن بُعد للشاشة الذكية | ملاحظة: الصورة الثانوية غير متوافقة مع عناصر التحكم عن بُعد لمحتوى الفيديو. |
الصوت
نظرة عامة
تعتمد الصورة الثانوية للمحتوى الصوتي على البيانات الوصفية للمحتوى المحمَّل. بعد تحميل عنصر الوسائط، تظهر في واجهة المستخدم أي تغييرات لاحقة على سمة secondaryImage
للبيانات الوصفية.
في حال استخدام شاشة ذكية كجهاز للتحكّم عن بُعد في الصوت، ستظهر الصورة الثانوية أيضًا على واجهة مستخدم الشاشة الذكية عند ضبطها.
التنفيذ
لضبط الصورة الثانوية أو إزالتها أو تعديلها، يجب تعديل السمة
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
بالمعلومات الجديدة إلى تعديل واجهة المستخدم. يمكن استخدام هذه الطريقة لمعالجة
التغييرات في البيانات الوصفية المقدَّمة من خلال تعديلات مثل أحداث 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
على قيمة فارغة في كائن البيانات الوصفية.
// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);
حملة فيديو
نظرة عامة
بالنسبة إلى محتوى الفيديو، يتم ضبط الصورة الثانوية وإزالتها باستخدام UiManager
.
يتم عرض الصورة الثانوية مع عناصر التحكم في الفيديو المركّبة.
التنفيذ
لإعداد الصورة الثانوية، يجب أن يحصل التطبيق على مثيل UiManager
وأن يستدعي setSecondaryImage
.
يتطلب ذلك مَعلمتَين: 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);
الخطوات التالية
وبهذا نكون قد انتهينا من الميزات التي يمكنك إضافتها إلى جهاز استقبال الويب. يمكنك الآن إنشاء تطبيق للمرسِل على iOS أو Android أو الويب.