এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

প্লেয়ারকে স্টাইল করুন, প্লেয়ারকে স্টাইল করুন

ওয়েব রিসিভার এসডিকে-তে একটি বিল্ট-ইন প্লেয়ার ইউআই রয়েছে। আপনার কাস্টম ওয়েব রিসিভার অ্যাপে এই ইউআইটি প্রয়োগ করতে, আপনার এইচটিএমএল ফাইলের বডিতে cast-media-player এলিমেন্টটি যোগ করতে হবে।

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

CSS ভেরিয়েবল আপনাকে প্লেয়ারের ব্যাকগ্রাউন্ড, স্প্ল্যাশ ইমেজ, ফন্ট ফ্যামিলি এবং আরও অনেক কিছু সহ cast-media-player বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করার সুযোগ দেয়। আপনি এই ভেরিয়েবলগুলো ইন-লাইন CSS স্টাইল, একটি CSS স্টাইলশিট, অথবা জাভাস্ক্রিপ্টে 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 প্রোপার্টিগুলো কাস্টমাইজ করতে আপনি নিম্নলিখিত ভেরিয়েবলগুলো ব্যবহার করতে পারেন:

ভেরিয়েবল এবং ডিফল্ট

নাম	ডিফল্ট মান	বর্ণনা
--পটভূমি	কালো	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 সিলেক্টর থেকে বিজ্ঞাপন, ফন্ট, প্লেয়ারের ছবি এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।

ভেরিয়েবল এবং ডিফল্ট

নাম	ডিফল্ট মান	বর্ণনা
--বিজ্ঞাপন-শিরোনাম	বিজ্ঞাপন	বিজ্ঞাপনের শিরোনাম।
--বিজ্ঞাপনের-শিরোনাম-এড়িয়ে-যাও	বিজ্ঞাপন এড়িয়ে যান	বিজ্ঞাপন এড়িয়ে যান টেক্সট বক্সের লেখা।
--রঙ-বিরতি	এইচএসএল(হিউ, ১০০%, ৫০%)	বিজ্ঞাপন বিরতির চিহ্নের জন্য রঙ।
--ফন্ট-পরিবার	ওপেন স্যান্স	মেটাডেটা এবং প্রোগ্রেস বারের জন্য ফন্ট ফ্যামিলি।
--স্পিনার-ছবি	ডিফল্ট ছবি	লঞ্চ করার সময় প্রদর্শিতব্য ছবিটি।
--বাফারিং-ইমেজ	ডিফল্ট ছবি	বাফারিং চলাকালীন প্রদর্শিতব্য ছবিটি।
--pause-image	ডিফল্ট ছবি	পজ করা অবস্থায় প্রদর্শিতব্য ছবিটি।
--প্লে-ইমেজ		প্লে করার সময় মেটাডেটাতে যে ছবিটি দেখানো হবে।
--থিম-হিউ	৪২	প্লেয়ারের জন্য ব্যবহারযোগ্য রঙ ।
--অগ্রগতি-রঙ	এইচএসএল(হিউ, ৯৫%, ৬০%)	অগ্রগতি বারের জন্য রঙ।

সিএসএস টেমপ্লেট

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

আরও তথ্য এবং অতিরিক্ত চিত্রের জন্য, স্টাইলড মিডিয়া রিসিভার দেখুন।

ওভারস্ক্যান

টিভি স্ট্যান্ডার্ডের বিবর্তন এবং দর্শকদের কাছে সর্বদা একটি পূর্ণ স্ক্রিনের ছবি দেখানোর আকাঙ্ক্ষার কারণে টিভির লেআউটের কিছু স্বতন্ত্র প্রয়োজনীয়তা রয়েছে। সম্পূর্ণ ডিসপ্লেটি যাতে পূর্ণ থাকে, তা নিশ্চিত করার জন্য টিভি ডিভাইসগুলো একটি অ্যাপ লেআউটের বাইরের প্রান্ত কেটে ফেলতে পারে। এই আচরণটি সাধারণত ওভারস্ক্যান নামে পরিচিত। ওভারস্ক্যানের কারণে স্ক্রিনের উপাদানগুলো কেটে যাওয়া এড়াতে আপনার লেআউটের চারদিকে ১০% মার্জিন যুক্ত করুন।

ডিফল্ট অডিও UI

মেটাডেটাটাইপ.মিউজিক_ট্র্যাক

এ. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist , MusicTrackMediaMetadata.artist , বা MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

জি. MediaInformation.duration

এইচ. প্লে / পজ

কাস্টম UI ডেটা বাইন্ডিং

কাস্ট ওয়েব রিসিভার এসডিকে cast-media-player পরিবর্তে আপনার নিজস্ব কাস্টম ইউআই এলিমেন্ট ব্যবহার সমর্থন করে।

কাস্টম UI ডেটা বাইন্ডিং আপনাকে আপনার নিজস্ব UI এলিমেন্ট ব্যবহার করার সুযোগ দেয় এবং আপনার রিসিভারে cast-media-player এলিমেন্ট যোগ করার পরিবর্তে PlayerDataBinder ক্লাস ব্যবহার করে UI-কে প্লেয়ার স্টেটের সাথে বাইন্ড করতে দেয়। যদি অ্যাপটি ডেটা বাইন্ডিং সমর্থন না করে, তবে এই বাইন্ডারটি ডেটা পরিবর্তনের জন্য ইভেন্ট পাঠানোও সমর্থন করে।

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();

আপনার HTML-এ অন্তত একটি MediaElement যোগ করা উচিত, যাতে ওয়েব রিসিভার সেটি ব্যবহার করতে পারে। যদি একাধিক MediaElement অবজেক্ট থাকে, তবে ওয়েব রিসিভার যে MediaElement ব্যবহার করবে বলে আপনি চান, সেটিকে ট্যাগ করতে হবে। এটি করার জন্য, নিচে দেখানো অনুযায়ী ভিডিওর ক্লাস লিস্টে castMediaElement যোগ করতে হবে; অন্যথায়, ওয়েব রিসিভার প্রথম MediaElement বেছে নেবে।

<video class="castMediaElement"></video>

পূর্ববর্তী

শাকা প্লেয়ার মাইগ্রেশনে HLS

পরবর্তী

স্মার্ট ডিসপ্লের জন্য অপ্টিমাইজ করুন, স্মার্ট ডিসপ্লের জন্য অপ্টিমাইজ করুন