จัดรูปแบบโปรแกรมเล่น

SDK ตัวรับสัญญาณเว็บมี UI ของโปรแกรมเล่นอยู่ในตัว หากต้องการใช้ UI นี้ในแอป Web Receiver ที่กำหนดเอง คุณต้องเพิ่มองค์ประกอบ cast-media-player ลงในเนื้อหาของไฟล์ HTML

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

ตัวแปร CSS ให้คุณปรับแต่งพร็อพเพอร์ตี้ cast-media-player ต่างๆ รวมถึงพื้นหลังของโปรแกรมเล่น รูปภาพหน้าจอแนะนำ ชุดแบบอักษร และอื่นๆ คุณเพิ่มตัวแปรเหล่านี้ได้ด้วยสไตล์ CSS ในบรรทัด, สไตล์ชีต CSS หรือ style.setProperty ใน JavaScript

ดูวิธีปรับแต่งพื้นที่แต่ละส่วนขององค์ประกอบโปรแกรมเล่นสื่อในส่วนถัดไป คุณสามารถใช้เทมเพลตต่อไปนี้เพื่อช่วยในการเริ่มต้นใช้งาน

ภายนอก

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 คุณปรับแต่ง --playback-logo-image ได้จากตัวเลือก body

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

คุณสมบัติพื้นหลังของโปรแกรมเล่น

ตัวแปร --background จะกำหนดคุณสมบัติพื้นหลังของโปรแกรมเล่นทั้งหมด ซึ่งจะแสดงระหว่างการเปิดและการเล่น ตัวอย่างเช่น คุณสามารถตั้งค่าพื้นหลังทั้งหมด เป็นการไล่ระดับสีแบบเส้นตรงสีขาวและสีเงิน

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

การแสดงเว็บรีซีฟเวอร์:

พื้นหลังที่กำหนดเอง

คุณใช้ตัวแปรต่อไปนี้เพื่อปรับแต่งพร็อพเพอร์ตี้ .background ได้

ตัวแปรและค่าเริ่มต้น

ชื่อ ค่าเริ่มต้น คำอธิบาย
--พื้นหลัง ดำ พร็อพเพอร์ตี้พื้นหลัง CSS
--background-color พร็อพเพอร์ตี้สีพื้นหลังของ CSS
--background-image พร็อพเพอร์ตี้ภาพพื้นหลังของ CSS
--background-repeat ไม่แสดงซ้ำ พร็อพเพอร์ตี้การใช้พื้นหลังซ้ำของ CSS
--background-size เพลงคัฟเวอร์ พร็อพเพอร์ตี้ขนาดพื้นหลังของ 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 ได้

ตัวแปรและค่าเริ่มต้น

ชื่อ ค่าเริ่มต้น คำอธิบาย
--logo-background พร็อพเพอร์ตี้พื้นหลัง CSS
--logo-color พร็อพเพอร์ตี้สีพื้นหลังของ CSS
--logo-image พร็อพเพอร์ตี้ภาพพื้นหลังของ CSS
--logo-repeat ไม่แสดงซ้ำ พร็อพเพอร์ตี้การใช้พื้นหลังซ้ำของ CSS
--logo-size พร็อพเพอร์ตี้ขนาดพื้นหลังของ CSS

เทมเพลต CSS

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

พร็อพเพอร์ตี้หน้าจอเริ่มต้น

คลาส .splash จะครอบคลุมโปรแกรมเล่นทั้งหมด เช่นเดียวกับคลาส .logo หากตั้งค่าพร็อพเพอร์ตี้เหล่านี้ ตัวแปร .splash จะลบล้างตัวแปร .logo เมื่อตัวรับไม่มีการใช้งาน ซึ่งหมายความว่าคุณจะใช้พร็อพเพอร์ตี้ .logo ชุดหนึ่งเมื่อเปิดใช้งานได้ และแสดงพื้นหลังหรือรูปภาพแยกต่างหากเมื่อเครื่องรับของคุณไม่มีการใช้งาน

ตัวอย่างเช่น คุณอาจลบล้างพื้นหลังแบบไล่ระดับสีขาวและสีเงินด้วย dimgray และเพิ่มไอคอน รอ... แบบเคลื่อนไหวได้โดยทำดังนี้

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

การแสดงเว็บรีซีฟเวอร์:

หน้าจอเริ่มต้นที่กำหนดเอง

หากไม่ตั้งค่าพร็อพเพอร์ตี้เหล่านี้ไว้ ผู้รับจะใช้การตั้งค่า .logo หรือชื่อแอปโดยค่าเริ่มต้นเมื่อไม่มีการใช้งาน

คุณใช้ตัวแปรต่อไปนี้เพื่อปรับแต่งพร็อพเพอร์ตี้ .splash ได้

ตัวแปรและค่าเริ่มต้น

ชื่อ ค่าเริ่มต้น คำอธิบาย
--splash-background พร็อพเพอร์ตี้พื้นหลัง CSS
--splash-color พร็อพเพอร์ตี้สีพื้นหลังของ CSS
--splash-image พร็อพเพอร์ตี้ภาพพื้นหลังของ CSS
--splash-repeat พร็อพเพอร์ตี้การใช้พื้นหลังซ้ำของ CSS
--splash-size พร็อพเพอร์ตี้ขนาดพื้นหลังของ CSS

เทมเพลต CSS

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 ภาพที่ 2 ในการแสดงภาพสไลด์
--slideshow-image-3 รูปภาพที่ 3 ในภาพสไลด์
--slideshow-image-4 รูปภาพที่ 4 ในภาพสไลด์
--slideshow-image-5 รูปภาพที่ 5 ในภาพสไลด์
--slideshow-image-6 รูปภาพที่ 6 ในภาพสไลด์
--slideshow-image-7 รูปภาพที่ 7 ในภาพสไลด์
--slideshow-image-8 รูปภาพที่ 8 ในภาพสไลด์
--slideshow-image-9 รูปภาพที่ 9 ในภาพสไลด์
--slideshow-image-10 รูปภาพที่ 10 ในภาพสไลด์

เทมเพลต CSS

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 พร็อพเพอร์ตี้พื้นหลัง CSS
--watermark-color พร็อพเพอร์ตี้สีพื้นหลังของ CSS
--watermark-image พร็อพเพอร์ตี้ภาพพื้นหลังของ CSS
--watermark-position ขวาล่าง พร็อพเพอร์ตี้ตำแหน่งพื้นหลังของ CSS
--watermark-repeat ไม่แสดงซ้ำ พร็อพเพอร์ตี้การใช้พื้นหลังซ้ำของ CSS
--watermark-size พร็อพเพอร์ตี้ขนาดพื้นหลังของ CSS

เทมเพลต CSS

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

การเล่น โฆษณา และคุณสมบัติ CSS อื่นๆ

นอกจากนี้ คุณยังปรับแต่งโฆษณา แบบอักษร รูปภาพโปรแกรมเล่น และพร็อพเพอร์ตี้อื่นๆ ได้จากตัวเลือก 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%) สีของแถบความคืบหน้า

เทมเพลต CSS

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% ในทุกด้านของเลย์เอาต์

UI เสียงเริ่มต้น

MetadataType.MUSIC_TRACK

ตอบ: --logo-image

ข. MusicTrackMediaMetadata.albumName

ค. MusicTrackMediaMetadata.title

ง. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist หรือ MusicTrackMediaMetadata.composer

จ. MusicTrackMediaMetadata.images[0]

ฉ. MediaStatus.currentTime

ช. MediaInformation.duration

H. เล่น/หยุดชั่วคราว

การเชื่อมโยงข้อมูล UI ที่กำหนดเอง

SDK เว็บตัวรับสัญญาณของ Cast รองรับการใช้องค์ประกอบ UI ที่คุณกำหนดเอง แทนที่จะเป็น cast-media-player

การเชื่อมโยงข้อมูล UI ที่กำหนดเองช่วยให้คุณใช้องค์ประกอบ UI ที่กำหนดเองของตัวเองและใช้คลาส PlayerDataBinder เพื่อเชื่อมโยง UI กับสถานะของโปรแกรมเล่นแทนการเพิ่มองค์ประกอบ cast-media-player ลงในตัวรับได้ นอกจากนี้ Binder ยังรองรับการส่งเหตุการณ์สำหรับการเปลี่ยนแปลงข้อมูลอีกด้วย หากแอปไม่รองรับการเชื่อมโยงข้อมูล

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 อย่างน้อย 1 รายการลงใน HTML เพื่อให้เว็บรีซีฟเวอร์ใช้งานได้ หากมีออบเจ็กต์ MediaElement หลายรายการ คุณควรติดแท็ก MediaElement ที่ต้องการให้ WebReceiver ใช้ ซึ่งทำได้โดยเพิ่ม castMediaElement ลงในรายการคลาสของวิดีโอ ตามที่แสดงด้านล่าง มิเช่นนั้น เว็บรีซีฟเวอร์ จะเลือก MediaElement รายการแรก

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