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

Web Receiver SDK, प्लेयर के लिए पहले से मौजूद यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराता है. इस यूज़र इंटरफ़ेस (यूआई) को अपने कस्टम Web Receiver ऐप्लिकेशन में लागू करने के लिए, आपको अपनी एचटीएमएल फ़ाइल के बॉडी में 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);
}

Web Receiver का डिसप्ले:

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

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

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

नाम डिफ़ॉल्ट वैल्यू ब्यौरा
--background काला सीएसएस बैकग्राउंड प्रॉपर्टी
--background-color सीएसएस background-color प्रॉपर्टी
--background-image सीएसएस background-image प्रॉपर्टी
--background-repeat no-repeat सीएसएस background-repeat प्रॉपर्टी
--background-size कवर सीएसएस 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');
}

Web Receiver का डिसप्ले:

कस्टम लोगो

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

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

नाम डिफ़ॉल्ट वैल्यू ब्यौरा
--logo-background सीएसएस बैकग्राउंड प्रॉपर्टी
--logo-color सीएसएस background-color प्रॉपर्टी
--logo-image सीएसएस background-image प्रॉपर्टी
--logo-repeat no-repeat सीएसएस background-repeat प्रॉपर्टी
--logo-size सीएसएस background-size प्रॉपर्टी

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

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

स्प्लैश की प्रॉपर्टी

.logo क्लास की तरह, .splash क्लास भी पूरे प्लेयर पर फैली होती है. अगर ये प्रॉपर्टी सेट की जाती हैं, तो आपका रिसीवर इस्तेमाल में न होने पर, .splash के वैरिएबल, .logo के वैरिएबल को बदल देंगे. इसका मतलब है कि लॉन्च के समय .logo की प्रॉपर्टी का एक सेट इस्तेमाल किया जा सकता है. साथ ही, जब आपका रिसीवर इस्तेमाल में न हो, तब अलग-अलग बैकग्राउंड या इमेज दिखाई जा सकती हैं.

उदाहरण के लिए, सफ़ेद और सिल्वर ग्रेडिएंट वाले बैकग्राउंड को dimgray से बदला जा सकता है. साथ ही, waiting... का ऐनिमेटेड आइकॉन जोड़ा जा सकता है:

cast-media-player {
  --splash-color: dimgray;
  --splash-image: url('waiting.png');
}

Web Receiver का डिसप्ले:

कस्टम स्प्लैश

अगर ये प्रॉपर्टी सेट नहीं की जाती हैं, तो आपका रिसीवर इस्तेमाल में न होने पर, .logo की सेटिंग या ऐप्लिकेशन के नाम पर सेट हो जाता है.

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

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

नाम डिफ़ॉल्ट वैल्यू ब्यौरा
--splash-background सीएसएस बैकग्राउंड प्रॉपर्टी
--splash-color सीएसएस background-color प्रॉपर्टी
--splash-image सीएसएस background-image प्रॉपर्टी
--splash-repeat सीएसएस background-repeat प्रॉपर्टी
--splash-size सीएसएस background-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 सीएसएस background-color प्रॉपर्टी
--watermark-image सीएसएस background-image प्रॉपर्टी
--watermark-position नीचे दाईं ओर सीएसएस background-position प्रॉपर्टी
--watermark-repeat no-repeat सीएसएस background-repeat प्रॉपर्टी
--watermark-size सीएसएस background-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 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%) प्रोग्रेस बार का रंग.

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

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

A. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

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

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

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

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

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

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