تصفُّح الوسائط

Cast Media التصفح (CMB) هي ميزة تتيح لمستخدمي الشاشة الذكية اكتشاف كتالوج محتوى الصوت أو الفيديو والتفاعل معه. ويمكن إجراء ذلك من خلال تحسين جهاز استقبال الويب بتجربة تصفّح مبسّطة يتم ضبطها خصيصًا للشاشات الذكية.

تحدّد منصة CMB النماذج الموحّدة التي تقدّم تجربة تصفّح متسقة تتّبع اصطلاحات واجهة المستخدم الذكية على الشاشة. يقدم مطوّرو البرامج بيانات لتعبئة هذه النماذج الموحدة. تدعم النماذج كلاً من محتوى الصوت والفيديو أو مزيجًا من الاثنين معًا.

نقاط الدخول

تتوفّر نقطتَا دخول إلى "إدارة السحابة الإلكترونية في متصفِّح Chrome" يمكن للمستخدمين من خلالها تصفُّح المحتوى واختياره باستخدام اللمس أو التحكُّم الصوتي.

التصفّح داخل المشغّل

مرِّر سريعًا للأعلى أثناء التشغيل للاختيار من قائمة المحتوى المقدَّم من التطبيق:

الفيديو

الصوت

تصفُّح الصفحة المقصودة

عندما يكون مستقبِل الويب مع العنصر cast-media-player قيد التشغيل على الشاشات الذكية، سيعرض جهاز CMB في حالة الخمول.

الفيديو والصوت

جارٍ تعبئة المحتوى

ويتحمل مطوّرو البرامج ملء النموذج لكل نقطة إدخال ببيانات كل عنصر محتوى. قد يختلف المحتوى المُستخدَم لتعبئة التصفح في المشغّل عن المحتوى المستخدَم لتعبئة التصفح في الصفحة المقصودة.

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

استخدِم "تصفُّح الصفحة المقصودة" لزيادة الوعي بالمحتوى الأصلي الجديد أو المحتوى المنشور حاليًا أو المحتوى الذي قد يهتم به المستخدمون أكثر.

تحذير: لتجنّب حدوث مشاكل في الأداء، يبلغ الحد الأقصى لعدد عناصر "تصفّح الوسائط" 30 عنصرًا.

تفعيل تصفّح الوسائط

قدِّم قائمة بمحتوى الوسائط للتصفُّح من خلال الاتصال بالرقم setBrowseContent:

const controls = cast.framework.ui.Controls.getInstance();
controls.setBrowseContent(BrowseContent);

ويتم تعديل واجهة مستخدم "تصفُّح الوسائط" مباشرةً بعد استدعاء هذه الطريقة.

ارتفاع منطقة آمنة

عند تفعيل CMB، يتغير ارتفاع المنطقة الآمنة لواجهة مستخدم SDK في Cast، وقد تحتاج إلى تحديث واجهة مستخدم مستلم الويب الحالية. استخدِم getSafeAreaHeight لتحديد ارتفاع المنطقة الآمنة.

// Media Browse UI enabled
controls.setBrowseContent(BrowseContent);
console.log(controls.getSafeAreaHeight()); // 338px on Google Nest Hub

// Media Browse UI disabled
controls.setBrowseContent(null);
console.log(controls.getSafeAreaHeight()); // 408px on Google Nest Hub

إزالة تصفّح الوسائط

لإزالة واجهة مستخدم "تصفُّح الوسائط"، يمكنك استخدام null مع setBrowseContent:

controls.setBrowseContent(null);

تخصيص تصفُّح الوسائط

تصفُّح المحتوى

يمكنك استخدام BrowseContent لتخصيص عنوان واجهة مستخدم التصفّح على الوسائط وتعديل العناصر:

(أ). BrowseContent.title

(ب). BrowseContent.items

يمكنك استخدام BrowseItem لعرض العنوان والترجمة والمدة والصورة لكل سلعة في واجهة المستخدم في "تصفّح الوسائط":

(أ). BrowseItem.image

(ب). BrowseItem.duration

ج- BrowseItem.title

د- BrowseItem.subtitle

نسبة العرض إلى الارتفاع

استخدِم targetAspectRatio لاختيار نسبة العرض إلى الارتفاع المثالية لمواد عرض الصور. تتوفّر ثلاث نسب عرض إلى ارتفاع متوافقة مع حزمة تطوير البرامج (SDK) على الويب:

نسبة العرض إلى الارتفاع	مثال
SQUARE_1_TO_1
PORTRAIT_2_TO_3
LANDSCAPE_16_TO_9

الرسائل

عندما يختار أحد المستخدمين أحد العناصر من واجهة مستخدم "تصفُّح الوسائط"، ترسل حزمة تطوير البرامج (SDK) على الويب رسالة LOAD إلى التطبيق وفقًا لقيم BrowseItem المحدّدة.

نموذج التعليمات البرمجية

const controls = cast.framework.ui.Controls.getInstance();

const item1 = new cast.framework.ui.BrowseItem();
item1.title = 'Title 1';
item1.subtitle = 'Subtitle 1';
item1.duration = 300;
item1.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item1.image = new cast.framework.messages.Image('1.jpg');
item1.entity = 'example://gizmos/1';

const item2 = new cast.framework.ui.BrowseItem();
item2.title = 'Title 2';
item2.subtitle = 'Subtitle 2';
item2.duration = 100;
item2.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item2.image = new cast.framework.messages.Image('2.jpg');
item2.entity = 'example://gizmos/2';

const items = [item1, item2];

const browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = items;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    // Media browse
    controls.setBrowseContent(browseContent);
  });

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD, loadRequestData => {
    if (loadRequestData.media && loadRequestData.media.entity) {
      // Load by entity
      loadRequestData.media.contentId = entityToId(loadRequestData.media.entity);
      loadRequestData.media.contentUrl = entityToUrl(loadRequestData.media.entity);
    }
    return loadRequestData;
  });