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

Web Receiver 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);
}

การแสดงผล Web Receiver

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

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

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

ชื่อ ค่าเริ่มต้น คำอธิบาย
--background ดำ พร็อพเพอร์ตี้พื้นหลังของ CSS
--background-color พร็อพเพอร์ตี้ background-color ของ CSS
--background-image พร็อพเพอร์ตี้ background-image ของ CSS
--background-repeat no-repeat พร็อพเพอร์ตี้ background-repeat ของ CSS
--background-size เพลงคัฟเวอร์ พร็อพเพอร์ตี้ 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');
}

การแสดงผล Web Receiver

สัญลักษณ์แบบกำหนดเอง

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

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

ชื่อ ค่าเริ่มต้น คำอธิบาย
--logo-background พร็อพเพอร์ตี้พื้นหลังของ CSS
--logo-color พร็อพเพอร์ตี้ background-color ของ CSS
--logo-image พร็อพเพอร์ตี้ background-image ของ CSS
--logo-repeat no-repeat พร็อพเพอร์ตี้ background-repeat ของ CSS
--logo-size พร็อพเพอร์ตี้ background-size ของ CSS

เทมเพลต CSS

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

คุณสมบัติของเอฟเฟกต์สาด

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

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

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

การแสดงผล Web Receiver

สแปลชที่กำหนดเอง

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

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

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

ชื่อ ค่าเริ่มต้น คำอธิบาย
--splash-background พร็อพเพอร์ตี้พื้นหลังของ CSS
--splash-color พร็อพเพอร์ตี้ background-color ของ CSS
--splash-image พร็อพเพอร์ตี้ background-image ของ CSS
--splash-repeat พร็อพเพอร์ตี้ background-repeat ของ CSS
--splash-size พร็อพเพอร์ตี้ background-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 พร็อพเพอร์ตี้ background-color ของ CSS
--watermark-image พร็อพเพอร์ตี้ background-image ของ CSS
--watermark-position ขวาล่าง พร็อพเพอร์ตี้ background-position ของ CSS
--watermark-repeat no-repeat พร็อพเพอร์ตี้ background-repeat ของ CSS
--watermark-size พร็อพเพอร์ตี้ background-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]

F. MediaStatus.currentTime

G. MediaInformation.duration

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

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

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

<video class="castMediaElement"></video>
ก่อนหน้า
HLS บน Shaka Player Migration
ถัดไป
เพิ่มประสิทธิภาพสําหรับจออัจฉริยะ