प्लेयर को स्टाइल में बदलें

वेब रिसीवर के SDK टूल में, पहले से मौजूद प्लेयर यूज़र इंटरफ़ेस (यूआई) होता है. इस यूज़र इंटरफ़ेस (यूआई) को अपने कस्टम वेब रिसीवर ऐप्लिकेशन में लागू करने के लिए, आपको अपनी एचटीएमएल फ़ाइल के मुख्य हिस्से में cast-media-player एलिमेंट जोड़ना होगा.

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

सीएसएस वैरिएबल की मदद से, कई cast-media-player प्रॉपर्टी को पसंद के मुताबिक बनाया जा सकता है. इनमें प्लेयर का बैकग्राउंड, स्प्लैश इमेज, फ़ॉन्ट फ़ैमिली वगैरह शामिल है. इन वैरिएबल को इन-लाइन सीएसएस स्टाइल, सीएसएस स्टाइलशीट या JavaScript में style.setProperty के साथ जोड़ा जा सकता है.

अगले सेक्शन में, मीडिया प्लेयर एलिमेंट के हर हिस्से को पसंद के मुताबिक बनाने का तरीका जानें. शुरू करने के लिए, इन टेंप्लेट का इस्तेमाल किया जा सकता है.

बाहरी उपयोगकर्ता

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 क्लास से अलग है. body सिलेक्टर से, --playback-logo-image को पसंद के मुताबिक बनाया जा सकता है.

body {
  --playback-logo-image: url('image.png'); /* set from the body selector */
}

प्लेयर के बैकग्राउंड की प्रॉपर्टी

--background वैरिएबल पूरे प्लेयर की बैकग्राउंड प्रॉपर्टी सेट करते हैं, जो लॉन्च और प्लेबैक के दौरान दिखाई देती हैं. उदाहरण के लिए, पूरे बैकग्राउंड को सफ़ेद और सिल्वर लीनियर ग्रेडिएंट पर सेट किया जा सकता है:

cast-media-player {
  --background-image: linear-gradient(white, silver);
}

वेब रिसीवर डिसप्ले:

पसंद के मुताबिक बैकग्राउंड

.background प्रॉपर्टी को पसंद के मुताबिक बनाने के लिए, इन वैरिएबल का इस्तेमाल किया जा सकता है:

वैरिएबल और डिफ़ॉल्ट

नाम डिफ़ॉल्ट मान ब्यौरा
--बैकग्राउंड काला सीएसएस की बैकग्राउंड प्रॉपर्टी
--background-color सीएसएस के बैकग्राउंड कलर की प्रॉपर्टी
--background-image सीएसएस की बैकग्राउंड इमेज प्रॉपर्टी
--background-repeat कोई दोहराव नहीं सीएसएस बैकग्राउंड-रिपीट प्रॉपर्टी
--background-size कवर सीएसएस के बैकग्राउंड साइज़ की प्रॉपर्टी

सीएसएस टेंप्लेट

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 सीएसएस की बैकग्राउंड प्रॉपर्टी
--logo-color सीएसएस के बैकग्राउंड कलर की प्रॉपर्टी
--logo-image सीएसएस की बैकग्राउंड इमेज प्रॉपर्टी
--logo-repeat कोई दोहराव नहीं सीएसएस बैकग्राउंड-रिपीट प्रॉपर्टी
--logo-size सीएसएस के बैकग्राउंड साइज़ की प्रॉपर्टी

सीएसएस टेंप्लेट

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 सीएसएस की बैकग्राउंड प्रॉपर्टी
--splash-color सीएसएस के बैकग्राउंड कलर की प्रॉपर्टी
--splash-image सीएसएस की बैकग्राउंड इमेज प्रॉपर्टी
--splash-repeat सीएसएस बैकग्राउंड-रिपीट प्रॉपर्टी
--splash-size सीएसएस के बैकग्राउंड साइज़ की प्रॉपर्टी

सीएसएस टेंप्लेट

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

स्लाइड शो

डिवाइस इस्तेमाल में न होने के दौरान, ज़्यादा से ज़्यादा 10 इमेज दिखाने के लिए (स्प्लैश इमेज की जगह ), स्लाइड शो के इन पैरामीटर का इस्तेमाल करें.

वैरिएबल और डिफ़ॉल्ट

नाम डिफ़ॉल्ट मान ब्यौरा
--slideshow-interval-duration 10 सेकंड इमेज के बीच का समय.
--slideshow-animation-duration 2 सेकंड ट्रांज़िशन की अवधि.
--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 स्लाइड शो में दसवीं इमेज.

सीएसएस टेंप्लेट

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 सीएसएस की बैकग्राउंड प्रॉपर्टी
--watermark-color सीएसएस के बैकग्राउंड कलर की प्रॉपर्टी
--watermark-image सीएसएस की बैकग्राउंड इमेज प्रॉपर्टी
--watermark-position नीचे दाईं ओर सीएसएस के बैकग्राउंड-पोज़िशन की प्रॉपर्टी
--watermark-repeat कोई दोहराव नहीं सीएसएस बैकग्राउंड-रिपीट प्रॉपर्टी
--watermark-size सीएसएस के बैकग्राउंड साइज़ की प्रॉपर्टी

सीएसएस टेंप्लेट

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

वीडियो चलाना, विज्ञापन, और दूसरी सीएसएस प्रॉपर्टी

cast-media-player सिलेक्टर से विज्ञापन, फ़ॉन्ट, प्लेयर इमेज, और दूसरी प्रॉपर्टी को भी पसंद के मुताबिक बनाया जा सकता है.

वैरिएबल और डिफ़ॉल्ट

नाम डिफ़ॉल्ट मान ब्यौरा
--ad-title विज्ञापन विज्ञापन का टाइटल.
--skip-ad-title विज्ञापन छोड़ें विज्ञापन छोड़ें टेक्स्ट बॉक्स का टेक्स्ट.
--break-color एचएसएल(ह्यू, 100%, 50%) विज्ञापन ब्रेक मार्क के लिए रंग.
--font-family Open Sans मेटाडेटा के लिए फ़ॉन्ट फ़ैमिली और प्रोग्रेस बार.
--spinner-image डिफ़ॉल्ट इमेज लॉन्च करते समय दिखाई जाने वाली इमेज.
--buffering-image डिफ़ॉल्ट इमेज बफ़रिंग के दौरान दिखाई जाने वाली इमेज.
--pause-image डिफ़ॉल्ट इमेज रोका हुआ होने पर दिखाई जाने वाली इमेज.
--play-image चलते समय मेटाडेटा में दिखाई जाने वाली इमेज.
--theme-hue 42 प्लेयर के लिए इस्तेमाल किया जाने वाला रंग.
--progress-color hsl(ह्यू, 95%, 60%) प्रोग्रेस बार का रंग.

सीएसएस टेंप्लेट

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

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist या MusicTrackMediaMetadata.composer

ईमेल MusicTrackMediaMetadata.images[0]

एफ़. MediaStatus.currentTime

जी. MediaInformation.duration

H. चलाएं / रोकें

कस्टम यूज़र इंटरफ़ेस (यूआई) डेटा बाइंडिंग

कास्ट वेब रिसीवर का SDK टूल, cast-media-player के बजाय आपके कस्टम यूज़र इंटरफ़ेस (यूआई) एलिमेंट का इस्तेमाल करने में काम करता है.

कस्टम यूज़र इंटरफ़ेस (यूआई) डेटा बाइंडिंग की मदद से आप अपने कस्टम यूज़र इंटरफ़ेस (यूआई) एलिमेंट का इस्तेमाल कर सकते हैं. साथ ही, अपने रिसीवर में cast-media-player एलिमेंट जोड़ने के बजाय, यूज़र इंटरफ़ेस (यूआई) को प्लेयर की स्थिति से बाइंड करने के लिए PlayerDataBinder क्लास का इस्तेमाल कर सकते हैं. अगर ऐप्लिकेशन में डेटा बाइंडर काम नहीं करता है, तो बाइंडर भी डेटा में बदलाव के लिए इवेंट भेजने की सुविधा देता है.

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 जोड़ना चाहिए, ताकि वेब रिसीवर इसका इस्तेमाल कर सके. अगर एक से ज़्यादा MediaElement ऑब्जेक्ट उपलब्ध हैं, तो आपको वह MediaElement टैग करना चाहिए जिसे वेब रिसीवर इस्तेमाल करने वाला व्यक्ति इस्तेमाल कर सके. castMediaElement को वीडियो की क्लास सूची में जोड़कर ऐसा करें, जैसा कि नीचे दिखाया गया है. ऐसा न करने पर, वेब पाने वाला पहले MediaElement को चुनेगा.

<video class="castMediaElement"></video>
पीछे जाएं
Shaka Player माइग्रेशन पर HLS
आगे बढ़ें
स्मार्ट डिसप्ले के लिए ऑप्टिमाइज़ करना