वेब रिसीवर के 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]
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>