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]
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>