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

Web Receiver SDK มี UI ของโปรแกรมเล่นในตัว หากต้องการใช้ UI นี้ในแอปผู้รับเว็บที่กําหนดเอง คุณจะต้องเพิ่มองค์ประกอบ 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/ตัวรับ.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
--สีพื้นหลัง- พร็อพเพอร์ตี้สีพื้นหลัง 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

เทมเพลต CSS

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

พร็อพเพอร์ตี้แนะนํา

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

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

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

ตัวรับสัญญาณเว็บ:

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

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

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

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

ชื่อ ค่าเริ่มต้น คำอธิบาย
--หน้าจอเริ่มต้น พร็อพเพอร์ตี้พื้นหลังของ CSS
--หน้าจอแนะนํา พร็อพเพอร์ตี้สีพื้นหลัง CSS
--รูปภาพแนะนํา พร็อพเพอร์ตี้ภาพพื้นหลัง CSS
--หน้าจอแนะนํา พร็อพเพอร์ตี้ทําซ้ําพื้นหลังของ CSS
--ขนาดแนะนํา พร็อพเพอร์ตี้ขนาดพื้นหลังของ 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 รูปภาพที่ 1 ในภาพสไลด์

เทมเพลต 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 ได้

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

ชื่อ ค่าเริ่มต้น คำอธิบาย
--ลายน้ํา-พื้นหลัง พร็อพเพอร์ตี้พื้นหลังของ CSS
--สีน้ํา พร็อพเพอร์ตี้สีพื้นหลัง 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

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

ชื่อ ค่าเริ่มต้น คำอธิบาย
--ad-title โฆษณา ชื่อโฆษณา
--ข้ามชื่อโฆษณา ข้ามโฆษณา ข้อความของกล่องข้อความข้ามโฆษณา
--ช่วงพักโฆษณาสี hsl(โทนสี, 100%, 50%) สีสําหรับเครื่องหมายช่วงพักโฆษณา
--แบบอักษร-ครอบครัว Open Sans ชุดแบบอักษรสําหรับข้อมูลเมตาและแถบความคืบหน้า
--รูปภาพหมุน ภาพเริ่มต้น รูปภาพที่จะแสดงขณะเปิด
--การบัฟเฟอร์รูปภาพ ภาพเริ่มต้น รูปภาพที่จะแสดงในขณะบัฟเฟอร์
--หยุดชั่วคราว-รูปภาพ ภาพเริ่มต้น รูปภาพที่จะแสดงขณะหยุดชั่วคราว
--เล่นรูปภาพ รูปภาพที่จะแสดงในข้อมูลเมตาขณะเล่น
--ธีม 42 โทนสีที่จะใช้สําหรับโปรแกรมเล่น
--ความคืบหน้าของสี hsl(โทนสี, 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

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

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

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