به بازیکن استایل بدهید

کیت توسعه نرم‌افزار (SDK) گیرنده وب، یک رابط کاربری پخش‌کننده داخلی ارائه می‌دهد. برای پیاده‌سازی این رابط کاربری در برنامه گیرنده وب سفارشی خود، باید عنصر cast-media-player را به بدنه فایل HTML خود اضافه کنید.

<body>
  <cast-media-player></cast-media-player>
</body>

متغیرهای CSS به شما امکان می‌دهند ویژگی‌های مختلف cast-media-player ، از جمله پس‌زمینه پخش‌کننده، تصویر splash، خانواده فونت و موارد دیگر را سفارشی کنید. می‌توانید این متغیرها را با سبک‌های CSS درون‌خطی، یک شیوه‌نامه CSS یا style.setProperty در جاوا اسکریپت اضافه کنید.

در بخش‌های بعدی، نحوه سفارشی‌سازی هر ناحیه از عنصر پخش‌کننده رسانه را خواهید آموخت. می‌توانید از الگوهای زیر برای شروع کار استفاده کنید.

خارجی

فهرست.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 استفاده کنید:

متغیرها و پیش‌فرض‌ها

نام مقدار پیش‌فرض توضیحات
--پس‌زمینه سیاه ویژگی پس‌زمینه در CSS
--رنگ پس‌زمینه ویژگی رنگ پس زمینه در CSS
--تصویر پس‌زمینه ویژگی تصویر پس زمینه در CSS
--تکرار پس‌زمینه تکرار نشدنی ویژگی تکرار پس‌زمینه در 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 استفاده کنید:

متغیرها و پیش‌فرض‌ها

نام مقدار پیش‌فرض توضیحات
--لوگو-پس‌زمینه ویژگی پس‌زمینه در CSS
--رنگ لوگو ویژگی رنگ پس زمینه در CSS
--تصویر لوگو ویژگی تصویر پس زمینه در CSS
--لوگو-تکرار تکرار نشدنی ویژگی تکرار پس‌زمینه در 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 استفاده کنید:

متغیرها و پیش‌فرض‌ها

نام مقدار پیش‌فرض توضیحات
--پاشش-زمینه ویژگی پس‌زمینه در CSS
--رنگ پاششی ویژگی رنگ پس زمینه در CSS
--تصویر پاشیده شده ویژگی تصویر پس زمینه در CSS
--پاشش-تکرار ویژگی تکرار پس‌زمینه در CSS
--اندازه پاشش ویژگی اندازه پس‌زمینه در CSS

قالب سی‌اس‌اس 

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

نمایش اسلاید

برای اینکه در حالت آماده به کار (به جای تصویر شروع)، حداکثر ۱۰ تصویر به صورت چرخشی نمایش داده شوند، از پارامترهای نمایش اسلاید زیر استفاده کنید.

متغیرها و پیش‌فرض‌ها

نام مقدار پیش‌فرض توضیحات
--نمایش اسلاید-فاصله-مدت زمان ده‌ها زمان بین تصاویر.
--مدت زمان انیمیشن اسلایدشو ۲ ثانیه مدت زمان گذار.
--اسلایدشو-تصویر-۱ اولین تصویر در اسلایدشو.
--تصویر-اسلاید-۲ تصویر دوم در اسلایدشو.
--اسلایدشو-تصویر-۳ تصویر سوم در اسلایدشو.
--اسلایدشو-تصویر-۴ تصویر چهارم در اسلایدشو.
--اسلایدشو-تصویر-۵ تصویر پنجم در اسلایدشو.
--اسلایدشو-تصویر-۶ تصویر ششم در اسلایدشو.
--اسلایدشو-تصویر-۷ هفتمین تصویر در اسلایدشو.
--اسلایدشو-تصویر-۸ تصویر هشتم در اسلایدشو.
--اسلایدشو-تصویر-۹ نهمین تصویر در اسلایدشو.
--اسلایدشو-تصویر-۱۰ دهمین تصویر در اسلایدشو.

قالب سی‌اس‌اس 

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 استفاده کنید:

متغیرها و پیش‌فرض‌ها

نام مقدار پیش‌فرض توضیحات
--پس‌زمینه واترمارک ویژگی پس‌زمینه در CSS
--رنگ واترمارک ویژگی رنگ پس زمینه در CSS
--تصویر واترمارک ویژگی تصویر پس زمینه در CSS
--موقعیت واترمارک پایین سمت راست ویژگی موقعیت پس‌زمینه در CSS
--تکرار واترمارک تکرار نشدنی ویژگی تکرار پس‌زمینه در CSS
--اندازه واترمارک ویژگی اندازه پس‌زمینه در CSS

قالب سی‌اس‌اس 

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

پخش، تبلیغات و سایر ویژگی‌های CSS

همچنین می‌توانید تبلیغات، فونت‌ها، تصاویر پخش‌کننده و سایر ویژگی‌ها را از انتخابگر cast-media-player سفارشی کنید.

متغیرها و پیش‌فرض‌ها

نام مقدار پیش‌فرض توضیحات
--عنوان آگهی آگهی عنوان آگهی.
--رد کردن-تبلیغ-عنوان رد کردن تبلیغ متن کادر متنی رد کردن تبلیغ .
--رنگ شکسته hsl (رنگ، ​​۱۰۰٪، ۵۰٪) رنگ برای علامت شکست تبلیغ.
--خانواده فونت سنس باز خانواده فونت برای ابرداده و نوار پیشرفت.
--تصویر اسپینر تصویر پیش‌فرض تصویری که هنگام اجرا نمایش داده می‌شود.
--بافر کردن-تصویر تصویر پیش‌فرض تصویری که هنگام بافر شدن نمایش داده می‌شود.
--مکث-تصویر تصویر پیش‌فرض تصویری که هنگام مکث نمایش داده می‌شود.
--پخش تصویر تصویری که هنگام پخش در فراداده نمایش داده می‌شود.
--تم-رنگ ۴۲ رنگی که برای پخش‌کننده استفاده می‌شود.
--رنگ پیشرفت hsl (رنگ، ​​۹۵٪، ۶۰٪) رنگ برای نوار پیشرفت

قالب سی‌اس‌اس 

cast-media-player {
  --ad-title:
  --skip-ad-title:
  --break-color:
  --font-family:
  --spinner-image:
  --buffering-image:
  --pause-image:
  --play-image:
  --theme-hue:
  --progress-color:
}

برای اطلاعات بیشتر و تصاویر بیشتر، به Styled Media Receiver مراجعه کنید.

اسکن بیش از حد

طرح‌بندی‌های تلویزیون به دلیل تکامل استانداردهای تلویزیون و تمایل به ارائه همیشگی تصویر تمام صفحه به بینندگان، الزامات منحصر به فردی دارند. دستگاه‌های تلویزیون می‌توانند لبه بیرونی طرح‌بندی برنامه را برش دهند تا از پر شدن کل صفحه نمایش اطمینان حاصل شود. این رفتار عموماً به عنوان overscan شناخته می‌شود. با در نظر گرفتن حاشیه 10٪ در همه طرف‌های طرح‌بندی خود، از برش عناصر صفحه به دلیل overscan جلوگیری کنید.

رابط کاربری صوتی پیش‌فرض

نوع داده متا.MUSIC_TRACK

الف. --logo-image

ب. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist ، MusicTrackMediaMetadata.artist ، یا MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

ز. MediaInformation.duration

ح. پخش / مکث

اتصال داده رابط کاربری سفارشی

کیت توسعه نرم‌افزاری گیرنده وب کست (Cast Web Receiver SDK) از استفاده از عنصر رابط کاربری سفارشی شما به جای 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 اضافه کنید تا گیرنده وب بتواند از آن استفاده کند. اگر چندین شیء MediaElement در دسترس باشد، باید MediaElement ای را که می‌خواهید گیرنده وب از آن استفاده کند، برچسب‌گذاری کنید. این کار را با اضافه کردن castMediaElement به لیست کلاس ویدیو، همانطور که در زیر نشان داده شده است، انجام می‌دهید. در غیر این صورت، گیرنده وب اولین MediaElement انتخاب خواهد کرد. 

<video class="castMediaElement"></video>
قبلی
HLS در Shaka Player Migration
بعدی
بهینه سازی برای نمایشگرهای هوشمند