اختيار نمط اللاعب

توفّر "حزمة تطوير البرامج (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]

و. MediaStatus.currentTime

ز. MediaInformation.duration

لنرمز لها بالرمز هـ. تشغيل / إيقاف مؤقت

ربط بيانات واجهة المستخدم المخصّصة

تتيح حزمة تطوير البرامج (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>