Cast Media التصفح (CMB) هي ميزة تتيح لمستخدمي الشاشة الذكية اكتشاف كتالوج محتوى الصوت أو الفيديو والتفاعل معه. ويمكن إجراء ذلك من خلال تحسين جهاز استقبال الويب بتجربة تصفّح مبسّطة يتم ضبطها خصيصًا للشاشات الذكية.
تحدّد منصة CMB النماذج الموحّدة التي تقدّم تجربة تصفّح متسقة تتّبع اصطلاحات واجهة المستخدم الذكية على الشاشة. يقدم مطوّرو البرامج بيانات لتعبئة هذه النماذج الموحدة. تدعم النماذج كلاً من محتوى الصوت والفيديو أو مزيجًا من الاثنين معًا.
نقاط الدخول
تتوفّر نقطتَا دخول إلى "إدارة السحابة الإلكترونية في متصفِّح Chrome" يمكن للمستخدمين من خلالها تصفُّح المحتوى واختياره باستخدام اللمس أو التحكُّم الصوتي.
التصفّح داخل المشغّل
مرِّر سريعًا للأعلى أثناء التشغيل للاختيار من قائمة المحتوى المقدَّم من التطبيق:
الفيديو
الصوت
تصفُّح الصفحة المقصودة
عندما يكون مستقبِل الويب مع العنصر cast-media-player
قيد التشغيل على الشاشات الذكية،
سيعرض جهاز CMB في حالة الخمول.
الفيديو والصوت
جارٍ تعبئة المحتوى
ويتحمل مطوّرو البرامج ملء النموذج لكل نقطة إدخال ببيانات كل عنصر محتوى. قد يختلف المحتوى المُستخدَم لتعبئة التصفح في المشغّل عن المحتوى المستخدَم لتعبئة التصفح في الصفحة المقصودة.
يمكنك استخدام التصفُّح داخل المشغّل لعرض عناصر مرتبطة بالمحتوى الذي يشغّله المستخدم حاليًا أو عناصر ضمن قائمة تشغيل. يمكن أيضًا لمقدّمي خدمة البث التلفزيوني المباشر استخدام نقطة الدخول هذه لتعبئة قائمة بالقنوات لتسهيل الوصول إليها.
استخدِم "تصفُّح الصفحة المقصودة" لزيادة الوعي بالمحتوى الأصلي الجديد أو المحتوى المنشور حاليًا أو المحتوى الذي قد يهتم به المستخدمون أكثر.
تفعيل تصفّح الوسائط
قدِّم قائمة بمحتوى الوسائط للتصفُّح من خلال الاتصال بالرقم 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
نسبة العرض إلى الارتفاع
استخدِم 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;
});