توفّر "حزمة تطوير البرامج (SDK) لاستقبال الويب" واجهة مستخدم مشغّل مضمّن. لتطبيق واجهة المستخدم هذه في تطبيق Web المستلِم (جهاز استقبال الويب) المخصّص، عليك إضافة العنصر cast-media-player
إلى نص ملف HTML.
<body>
<cast-media-player></cast-media-player>
</body>
تسمح لك متغيّرات CSS بتخصيص خصائص cast-media-player
المتنوعة،
بما في ذلك خلفية المشغّل وصورة البداية ومجموعة الخطوط والمزيد. يمكنك إضافة هذه المتغيّرات باستخدام أنماط CSS المضمّنة أو ورقة أنماط CSS أو style.setProperty
في JavaScript.
في الأقسام التالية، تعرَّف على كيفية تخصيص كل منطقة في عنصر مشغّل الوسائط. يمكنك استخدام النماذج التالية لمساعدتك في البدء.
index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/receiver.css" media="screen" /> <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"> </script> </head> <body> <cast-media-player></cast-media-player> </body> <footer> <script src="js/receiver.js"></script> </footer> </html>
js/receiver.js
const context = cast.framework.CastReceiverContext.getInstance(); ... // Update style using javascript let playerElement = document.getElementsByTagName("cast-media-player")[0]; playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")'); ... context.start();
css/receiver.css
body { --playback-logo-image: url('http://some/image.png'); } cast-media-player { --theme-hue: 100; --progress-color: rgb(0, 255, 0); --splash-image: url('http://some/image.png'); --splash-size: cover; }
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"> </script> </head> <body> <cast-media-player></cast-media-player> <style> body { --playback-logo-image: url('http://some/image.png'); } cast-media-player { --theme-hue: 100; --progress-color: rgb(0, 255, 0); --splash-image: url('http://some/image.png'); } </style> <script> const context = cast.framework.CastReceiverContext.getInstance(); ... // Update style using javascript let playerElement = document.getElementsByTagName("cast-media-player")[0]; playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")'); ... context.start(); </script> </body> </html>
شعار التشغيل
يظهر شعار التشغيل في الزاوية العلوية اليسرى من جهاز الاستقبال أثناء
تشغيل الوسائط. هذه السمة منفصلة عن الفئة .logo
. يمكنك تخصيص --playback-logo-image
من أداة الاختيار body
.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
خصائص خلفية المشغّل
تحدّد متغيّرات --background
خصائص الخلفية للمشغّل بالكامل، وتكون مرئية أثناء التشغيل والتشغيل. على سبيل المثال، يمكنك تعيين الخلفية بالكامل
على تدرج خطي أبيض وفضي:
cast-media-player {
--background-image: linear-gradient(white, silver);
}
شاشة استقبال الويب:
يمكنك استخدام المتغيّرات التالية لتخصيص مواقع .background
:
المتغيرات والقيم التلقائية
الاسم | القيمة التلقائية | الوصف |
---|---|---|
--background | باللون الأسود | سمة الخلفية في CSS |
--background-color | سمة لون الخلفية في CSS | |
--background-image | سمة صورة الخلفية في CSS | |
--background-repeat | بدون تكرار | سمة تكرار الخلفية في CSS |
--background-size | أداء لأغنية تابعة لطرف ثالث | سمة حجم خلفية CSS |
نموذج CSS
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
خصائص الشعار
يتم وضع الفئة .logo
في مقدّمة فئة .background
وتغطي المشغّل بأكمله. يتم عرض هذا الصف عند تشغيل جهاز الاستقبال. في حال عدم تقديم أي متغيّرات .splash
، سيتم عرض الفئة .logo
أيضًا عندما يكون المُستلِم في حالة عدم النشاط.
يضبط المثال التالي --logo-image
على رمز معادِل الصوت باسم
welcome.png
. يتم ضبط الصورة تلقائيًا في وسط جهاز الاستقبال:
cast-media-player {
--logo-image: url('welcome.png');
}
شاشة استقبال الويب:
يمكنك استخدام المتغيّرات التالية لتخصيص مواقع .logo
:
المتغيرات والقيم التلقائية
الاسم | القيمة التلقائية | الوصف |
---|---|---|
--logo-background | سمة الخلفية في CSS | |
--logo-color | سمة لون الخلفية في CSS | |
--logo-image | سمة صورة الخلفية في CSS | |
--logo-repeat | بدون تكرار | سمة تكرار الخلفية في CSS |
--logo-size | سمة حجم خلفية CSS |
نموذج CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
خصائص البداية
وعلى غرار الفئة .logo
، تمتد الفئة .splash
على المشغّل بالكامل. في حال ضبط هذه الخصائص، ستلغي متغيّرات .splash
متغيرات .logo
عندما يكون جهاز الاستقبال غير نشِط لفترة قصيرة. يعني ذلك أنّه يمكنك استخدام مجموعة واحدة من
سمات .logo
عند التشغيل وعرض خلفيات أو صور منفصلة
عندما يكون جهاز الاستقبال غير نشِط لفترة قصيرة.
على سبيل المثال، يمكنك تجاهل الخلفية البيضاء والفضية المتدرجة باستخدام dimgray
، وإضافة رمز متحرك في انتظار...:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
شاشة استقبال الويب:
إذا لم تضبط هذه السمات، سيضبط جهاز الاستقبال تلقائيًا على إعدادات .logo
أو اسم التطبيق عندما يكون الجهاز غير نشِط لفترة قصيرة.
يمكنك استخدام المتغيّرات التالية لتخصيص مواقع .splash
:
المتغيرات والقيم التلقائية
الاسم | القيمة التلقائية | الوصف |
---|---|---|
--splash-background | سمة الخلفية في CSS | |
--splash-color | سمة لون الخلفية في CSS | |
--splash-image | سمة صورة الخلفية في CSS | |
--splash-repeat | سمة تكرار الخلفية في CSS | |
--splash-size | سمة حجم خلفية CSS |
نموذج CSS
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
عرض الشرائح
لعرض ما يصل إلى 10 صور أثناء التنقل في حالة عدم النشاط (بدلاً من صورة البداية)، استخدِم معلمات عرض الشرائح التالية.
المتغيرات والقيم التلقائية
الاسم | القيمة التلقائية | الوصف |
---|---|---|
--slideshow-interval-duration | 10 ث | الوقت بين الصور |
--slideshow-animation-duration | ثانيتان | مدة الانتقال. |
--slideshow-image-1 | الصورة الأولى في عرض الشرائح. | |
--slideshow-image-2 | الصورة الثانية في عرض الشرائح. | |
--slideshow-image-3 | الصورة الثالثة في عرض الشرائح. | |
--slideshow-image-4 | الصورة الرابعة في عرض الشرائح. | |
--slideshow-image-5 | الصورة الخامسة في عرض الشرائح. | |
--slideshow-image-6 | الصورة السادسة في عرض الشرائح. | |
--slideshow-image-7 | الصورة السابعة في عرض الشرائح. | |
--slideshow-image-8 | الصورة الثامنة في عرض الشرائح. | |
--slideshow-image-9 | الصورة التاسعة في عرض الشرائح. | |
--slideshow-image-10 | الصورة العاشرة في عرض الشرائح. |
نموذج CSS
cast-media-player {
--slideshow-interval-duration:
--slideshow-animation-duration:
--slideshow-image-1:
--slideshow-image-2:
--slideshow-image-3:
--slideshow-image-4:
--slideshow-image-5:
--slideshow-image-6:
--slideshow-image-7:
--slideshow-image-8:
--slideshow-image-9:
--slideshow-image-10:
}
خصائص العلامة المائية
يتم عرض .watermark
أثناء تشغيل الوسائط. عادةً ما تكون هذه الصورة صغيرة وشفافة ويتم تعيينها تلقائيًا في أسفل يمين جهاز الاستقبال.
يمكنك استخدام المتغيّرات التالية لتخصيص مواقع .watermark
:
المتغيرات والقيم التلقائية
الاسم | القيمة التلقائية | الوصف |
---|---|---|
--watermark-background | سمة الخلفية في CSS | |
--watermark-color | سمة لون الخلفية في CSS | |
--watermark-image | سمة صورة الخلفية في CSS | |
--watermark-position | أسفل اليسار | سمة موضع خلفية CSS |
--watermark-repeat | بدون تكرار | سمة تكرار الخلفية في CSS |
--watermark-size | سمة حجم خلفية CSS |
نموذج CSS
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
التشغيل والإعلانات وخدمات CSS الأخرى
يمكنك أيضًا تخصيص الإعلانات والخطوط وصور المشغّلات وغيرها من الخصائص من أداة الاختيار cast-media-player
.
المتغيرات والقيم التلقائية
الاسم | القيمة التلقائية | الوصف |
---|---|---|
--ad-title | إعلان | عنوان الإعلان. |
--skip-ad-title | تخطي الإعلان | نص مربّع النص تخطّي الإعلان |
--break-color | hsl(hue, 100%, 50%) | لون علامة الفاصل الإعلاني |
--font-family | Open Sans | مجموعة الخطوط للبيانات الوصفية وشريط التقدم |
--spinner-image | الصورة التلقائية | الصورة التي سيتم عرضها أثناء التشغيل. |
--buffering-image | الصورة التلقائية | الصورة التي سيتم عرضها أثناء التخزين المؤقت. |
--pause-image | الصورة التلقائية | الصورة المطلوب عرضها أثناء الإيقاف المؤقت. |
--play-image | الصورة التي سيتم عرضها في البيانات الوصفية أثناء التشغيل. | |
--theme-hue | 42 | درجة اللون المطلوب استخدامها للمشغّل. |
--progress-color | hsl(hue, 95%, 60%) | لون شريط التقدم |
نموذج CSS
cast-media-player {
--ad-title:
--skip-ad-title:
--break-color:
--font-family:
--spinner-image:
--buffering-image:
--pause-image:
--play-image:
--theme-hue:
--progress-color:
}
للحصول على مزيد من المعلومات والرسوم التوضيحية الإضافية، يمكنك الاطّلاع على جهاز استقبال الوسائط بنمط معيّن.
الخروج عن إطار الشاشة
هناك بعض المتطلبات الفريدة لتخطيطات التلفزيون بسبب تطور معايير التلفزيون والرغبة في عرض صورة بملء الشاشة دائمًا للمشاهدين. يمكن لأجهزة التلفزيون قص الحافة الخارجية لتصميم التطبيق لضمان ملء الشاشة بالكامل. ويُشار إلى هذا السلوك بوجه عام باسم "الإفراط في المسح". تجنب اقتصاص عناصر الشاشة بسبب المبالغة في المسح الضوئي، وذلك عن طريق دمج هامش 10% على جميع جوانب التخطيط.
واجهة المستخدم التلقائية للصوت
MetadataType.MUSIC_TRACK
أ. --logo-image
ب. MusicTrackMediaMetadata.albumName
ج. MusicTrackMediaMetadata.title
د- MusicTrackMediaMetadata.albumArtist
أو MusicTrackMediaMetadata.artist
أو MusicTrackMediaMetadata.composer
هـ. MusicTrackMediaMetadata.images[0]
لنرمز لها بالرمز هـ. تشغيل / إيقاف مؤقت
ربط بيانات واجهة المستخدم المخصّصة
تتيح حزمة تطوير البرامج (SDK) لجهاز Google Cast لاستقبال الويب استخدام عنصر واجهة المستخدم المخصّص بدلاً من cast-media-player
.
يتيح لك ربط بيانات واجهة المستخدم المخصّصة استخدام عنصر واجهة المستخدم المخصّص واستخدام الفئة
PlayerDataBinder
لربط واجهة المستخدم بحالة المشغّل بدلاً من إضافة العنصر
cast-media-player
إلى جهاز الاستقبال. يدعم الصنف Binder أيضًا إرسال الأحداث
لتغييرات البيانات، إذا كان التطبيق لا يتيح ربط البيانات.
const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();
const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);
// Update ui according to player state
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
e => {
switch (e.value) {
case cast.framework.ui.State.LAUNCHING:
case cast.framework.ui.State.IDLE:
// Write your own event handling code
break;
case cast.framework.ui.State.LOADING:
// Write your own event handling code
break;
case cast.framework.ui.State.BUFFERING:
// Write your own event handling code
break;
case cast.framework.ui.State.PAUSED:
// Write your own event handling code
break;
case cast.framework.ui.State.PLAYING:
// Write your own event handling code
break;
}
});
context.start();
يجب إضافة رمز واحد على الأقل
MediaElement
إلى ترميز HTML حتى يتمكّن جهاز استقبال الويب من استخدامه. وفي حال توفُّر عدة كائنات MediaElement
، عليك وضع علامة على MediaElement
التي تريد أن يستخدمها "جهاز استقبال الويب". ويمكنك إجراء ذلك من خلال إضافة السمة castMediaElement
إلى قائمة الفئات الخاصة بالفيديو،
كما هو موضّح أدناه، وإلا سيختار مستقبِل الويب MediaElement
الأول.
<video class="castMediaElement"></video>