الصورة الثانوية

يمكن لمطوّري برامج البث إضافة صورة معلوماتية (ثانوية) إلى واجهة المستخدم لتطبيقات الصوت والفيديو. عليك الاطّلاع على تنسيقات الصور المتوافقة للتأكّد من توافقها.

تظهر الصورة الثانوية في أعلى يسار شاشة العرض، ويمكن استخدامها لعرض رسم بياني مع معلومات إضافية عن المحتوى الذي يتم تشغيله حاليًا، مثل تنسيق المحتوى أو رمز نداء المحطة الإذاعية أو تقييم البرنامج التلفزيوني. يستمر ظهور الصورة الثانوية على الشاشة طالما تم تفعيل ميزة المحتوى الحالي والمشغّل ليس في حالة عدم النشاط.

يعرض الجدول 1 تجربة المستخدم عند تفعيل الميزة على أنواع الأجهزة وعناصر التحكّم السارية. تختلف تفاصيل التنفيذ والدمج قليلاً بين تطبيقات الصوت والفيديو. راجِع الأقسام أدناه لدمج هذه الميزة في تطبيق Web واجهة برمجة التطبيقات.

الجدول 1: واجهة مستخدم الصورة الثانوية حسب المحتوى ونوع الجهاز
نوع الجهاز المحتوى الصوتي محتوى الفيديو
Chromecast صورة ثانوية على مفاتيح Chromecast الإلكترونية للمحتوى الصوتي. الصورة الثانوية على مفاتيح Chromecast الإلكترونية لمحتوى الفيديو.
Chromecast مع Google TV صورة ثانوية على جهاز chromecast مع مفاتيح إلكترونية لـ Google TV للمحتوى الصوتي. صورة ثانوية على 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 أو الويب.