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

توفّر حزمة تطوير البرامج (SDK) الخاصة بمستقبل الويب واجهة مستخدم مدمجة للمشغّل. لتنفيذ واجهة المستخدم هذه في تطبيق Web Receiver المخصّص، عليك إضافة العنصر 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);
}

شاشة Web Receiver:

خلفية مخصّصة

يمكنك استخدام المتغيّرات التالية لتخصيص خصائص .background:

المتغيرات والإعدادات التلقائية

الاسم القيمة التلقائية الوصف
--background أسود خاصية الخلفية في CSS
--background-color خاصية background-color في CSS
--background-image خاصية background-image في CSS
--background-repeat no-repeat خاصية background-repeat في CSS
--background-size أداء لأغنية تابعة لطرف ثالث خاصية 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');
}

شاشة Web Receiver:

شعار مخصص

يمكنك استخدام المتغيّرات التالية لتخصيص خصائص .logo:

المتغيرات والإعدادات التلقائية

الاسم القيمة التلقائية الوصف
--logo-background خاصية الخلفية في CSS
--logo-color خاصية background-color في CSS
--logo-image خاصية background-image في CSS
--logo-repeat no-repeat خاصية background-repeat في CSS
--logo-size خاصية background-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');
}

شاشة Web Receiver:

شاشة البداية المخصّصة

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

يمكنك استخدام المتغيّرات التالية لتخصيص خصائص .splash:

المتغيرات والإعدادات التلقائية

الاسم القيمة التلقائية الوصف
--splash-background خاصية الخلفية في CSS
--splash-color خاصية background-color في CSS
--splash-image خاصية background-image في CSS
--splash-repeat خاصية background-repeat في CSS
--splash-size خاصية background-size في CSS

نموذج CSS

cast-media-player {
  --splash-background:
  --splash-color:
  --splash-image:
  --splash-repeat:
  --splash-size:
}

عرض الشرائح

لعرض ما يصل إلى 10 صور بالتناوب أثناء وضع الخمول (بدلاً من صورة البداية)، استخدِم مَعلمات عرض الشرائح التالية.

المتغيرات والإعدادات التلقائية

الاسم القيمة التلقائية الوصف
--slideshow-interval-duration 10 ث الوقت بين الصور
--slideshow-animation-duration 2s مدة الانتقال
--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 خاصية background-color في CSS
--watermark-image خاصية background-image في CSS
--watermark-position أسفل اليسار خاصية background-position في CSS
--watermark-repeat no-repeat خاصية background-repeat في CSS
--watermark-size خاصية background-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

C. MusicTrackMediaMetadata.title

د. MusicTrackMediaMetadata.albumArtist أو MusicTrackMediaMetadata.artist أو MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

"سي" تشغيل / إيقاف مؤقت

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

تتيح حزمة تطوير البرامج (SDK) الخاصة بـ Cast Web Receiver استخدام عنصر في واجهة المستخدم مخصّص بدلاً من cast-media-player.

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

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 ليتمكّن تطبيق Web Receiver من استخدامه. في حال توفّر عدّة عناصر MediaElement، يجب وضع علامة على العنصر MediaElement الذي تريد أن يستخدمه Web Receiver. يمكنك إجراء ذلك عن طريق إضافة castMediaElement إلى قائمة الفيديوهات في الفئة، كما هو موضّح أدناه، وإلا سيختار Web Receiver الفيديو الأول MediaElement.

<video class="castMediaElement"></video>
السابق
بروتوكول HLS في عملية نقل مشغّل Shaka
التالي
التحسين للشاشات الذكية