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

वेब रिसीवर 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 काला सीएसएस की बैकग्राउंड प्रॉपर्टी
--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 hsl(रंग, 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

डी॰ MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist या MusicTrackMediaMetadata.composer

ई. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

जी. MediaInformation.duration

एच॰ चलाएं / रोकें

पसंद के मुताबिक बनाए गए यूज़र इंटरफ़ेस (यूआई) की डेटा बाइंडिंग

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

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