Web Receiver SDK cung cấp giao diện người dùng trình phát tích hợp. Để triển khai giao diện người dùng này vào ứng dụng Web Receiver tuỳ chỉnh, bạn cần thêm phần tử cast-media-player vào nội dung của tệp HTML.
<body>
<cast-media-player></cast-media-player>
</body>
Các biến CSS cho phép bạn tuỳ chỉnh nhiều thuộc tính cast-media-player, bao gồm cả nền trình phát, hình ảnh hiển thị khi khởi động, bộ phông chữ và nhiều thuộc tính khác. Bạn có thể thêm các biến này bằng kiểu CSS nội tuyến, biểu định kiểu CSS hoặc style.setProperty trong JavaScript.
Trong các phần tiếp theo, hãy tìm hiểu cách tuỳ chỉnh từng vùng của phần tử trình phát nội dung nghe nhìn. Bạn có thể sử dụng các mẫu sau để bắt đầu.
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>Biểu trưng Playback
Biểu trưng phát sẽ xuất hiện ở góc trên bên trái của thiết bị nhận trong khi nội dung nghe nhìn đang phát. Thuộc tính này tách biệt với lớp .logo. Bạn có thể tuỳ chỉnh --playback-logo-image trong bộ chọn body.
body {
--playback-logo-image: url('image.png'); /* set from the body selector */
}
Thuộc tính nền của trình phát
--background đặt các biến thuộc tính nền của toàn bộ trình phát, hiển thị trong quá trình khởi chạy và phát. Ví dụ: bạn có thể đặt toàn bộ nền thành một độ dốc tuyến tính màu trắng và bạc:
cast-media-player {
--background-image: linear-gradient(white, silver);
}
Màn hình Web Receiver:
Bạn có thể sử dụng các biến sau để tuỳ chỉnh thuộc tính .background:
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Mô tả |
|---|---|---|
| --background | đen | Thuộc tính nền CSS |
| --background-color | Thuộc tính background-color của CSS | |
| --background-image | Thuộc tính background-image của CSS | |
| --background-repeat | no-repeat | Thuộc tính background-repeat của CSS |
| --background-size | bản cover | Thuộc tính background-size của CSS |
Mẫu CSS
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
Thuộc tính biểu trưng
Lớp .logo nằm ở phía trước lớp .background và trải dài toàn bộ trình phát. Lớp này hiển thị khi bộ nhận đang khởi chạy. Nếu bạn không cung cấp bất kỳ biến .splash nào, lớp .logo cũng sẽ hiển thị khi thiết bị nhận ở trạng thái rảnh.
Ví dụ sau đây đặt --logo-image thành biểu tượng bộ cân bằng có tên welcome.png. Theo mặc định, hình ảnh sẽ xuất hiện ở chính giữa màn hình của thiết bị nhận:
cast-media-player {
--logo-image: url('welcome.png');
}
Màn hình Web Receiver:
Bạn có thể sử dụng các biến sau để tuỳ chỉnh thuộc tính .logo:
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Mô tả |
|---|---|---|
| --logo-background | Thuộc tính nền CSS | |
| --logo-color | Thuộc tính background-color của CSS | |
| --logo-image | Thuộc tính background-image của CSS | |
| --logo-repeat | no-repeat | Thuộc tính background-repeat của CSS |
| --logo-size | Thuộc tính background-size của CSS |
Mẫu CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Thuộc tính của màn hình khởi động
Tương tự như lớp .logo, lớp .splash trải rộng toàn bộ trình phát. Nếu bạn đặt các thuộc tính này, các biến .splash sẽ ghi đè các biến .logo khi bộ nhận ở trạng thái rảnh. Điều này có nghĩa là bạn có thể sử dụng một nhóm thuộc tính .logo khi khởi chạy và hiển thị các hình nền hoặc hình ảnh riêng biệt khi thiết bị nhận ở trạng thái rảnh.
Ví dụ: bạn có thể ghi đè nền chuyển màu trắng và bạc bằng dimgray, đồng thời thêm biểu tượng đang chờ... có ảnh động:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Màn hình Web Receiver:
Nếu bạn không đặt các thuộc tính này, thì khi ở trạng thái rảnh, receiver sẽ mặc định sử dụng chế độ cài đặt .logo hoặc tên ứng dụng của bạn.
Bạn có thể sử dụng các biến sau để tuỳ chỉnh thuộc tính .splash:
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Mô tả |
|---|---|---|
| --splash-background | Thuộc tính nền CSS | |
| --splash-color | Thuộc tính background-color của CSS | |
| --splash-image | Thuộc tính background-image của CSS | |
| --splash-repeat | Thuộc tính background-repeat của CSS | |
| --splash-size | Thuộc tính background-size của CSS |
Mẫu CSS
cast-media-player {
--splash-background:
--splash-color:
--splash-image:
--splash-repeat:
--splash-size:
}
Trình chiếu
Để có tối đa 10 hình ảnh luân phiên trong trạng thái không hoạt động (thay cho hình ảnh màn hình chờ), hãy sử dụng các thông số trình chiếu sau.
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Mô tả |
|---|---|---|
| --slideshow-interval-duration | 10 giây | Thời gian giữa các hình ảnh. |
| --slideshow-animation-duration | 2 giây | Thời lượng chuyển đổi. |
| --slideshow-image-1 | Hình ảnh đầu tiên trong bản trình chiếu. | |
| --slideshow-image-2 | Hình ảnh thứ hai trong bản trình chiếu. | |
| --slideshow-image-3 | Hình ảnh thứ ba trong bản trình chiếu. | |
| --slideshow-image-4 | Hình ảnh thứ tư trong bản trình chiếu. | |
| --slideshow-image-5 | Hình ảnh thứ năm trong bản trình chiếu. | |
| --slideshow-image-6 | Hình ảnh thứ sáu trong bản trình chiếu. | |
| --slideshow-image-7 | Hình ảnh thứ bảy trong trang trình chiếu. | |
| --slideshow-image-8 | Hình ảnh thứ tám trong bản trình chiếu. | |
| --slideshow-image-9 | Hình ảnh thứ chín trong trang trình chiếu. | |
| --slideshow-image-10 | Hình ảnh thứ mười trong bản trình chiếu. |
Mẫu 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:
}
Thuộc tính của hình mờ
Biểu tượng .watermark sẽ xuất hiện khi nội dung nghe nhìn đang phát. Đây thường là một hình ảnh nhỏ, trong suốt và mặc định ở phía dưới bên phải của thiết bị nhận.
Bạn có thể sử dụng các biến sau để tuỳ chỉnh thuộc tính .watermark:
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Mô tả |
|---|---|---|
| --watermark-background | Thuộc tính nền CSS | |
| --watermark-color | Thuộc tính background-color của CSS | |
| --watermark-image | Thuộc tính background-image của CSS | |
| --watermark-position | dưới cùng bên phải | Thuộc tính background-position của CSS |
| --watermark-repeat | no-repeat | Thuộc tính background-repeat của CSS |
| --watermark-size | Thuộc tính background-size của CSS |
Mẫu CSS
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
Chế độ phát, quảng cáo và các thuộc tính CSS khác
Bạn cũng có thể tuỳ chỉnh quảng cáo, phông chữ, hình ảnh trình phát và các thuộc tính khác trong bộ chọn cast-media-player.
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Mô tả |
|---|---|---|
| --ad-title | Quảng cáo | Tiêu đề của quảng cáo. |
| --skip-ad-title | Bỏ qua quảng cáo | Văn bản của hộp văn bản Bỏ qua quảng cáo. |
| --break-color | hsl(hue; 100%; 50%) | Màu của dấu điểm chèn quảng cáo. |
| --font-family | Open Sans | Bộ phông chữ cho siêu dữ liệu và thanh tiến trình. |
| --spinner-image | Hình ảnh mặc định | Hình ảnh sẽ hiển thị trong khi khởi chạy. |
| --buffering-image | Hình ảnh mặc định | Hình ảnh sẽ hiển thị trong khi video đang tải. |
| --pause-image | Hình ảnh mặc định | Hình ảnh sẽ hiển thị khi bị tạm dừng. |
| --play-image | Hình ảnh sẽ xuất hiện trong siêu dữ liệu khi phát. | |
| --theme-hue | 42 | Sắc độ dùng cho trình phát. |
| --progress-color | hsl(hue, 95%, 60%) | Màu của thanh tiến trình. |
Mẫu 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:
}
Để biết thêm thông tin và hình minh hoạ bổ sung, hãy tham khảo phần Styled Media Receiver.
Quét quá
Bố cục cho TV có một số yêu cầu riêng do sự phát triển của các tiêu chuẩn TV và mong muốn luôn trình bày hình ảnh toàn màn hình cho người xem. Các thiết bị TV có thể cắt cạnh ngoài của bố cục ứng dụng để đảm bảo toàn bộ màn hình được lấp đầy. Hành vi này thường được gọi là quét dư. Tránh để các phần tử trên màn hình bị cắt do hiện tượng quét tràn bằng cách thêm lề 10% vào tất cả các cạnh của bố cục.
Giao diện người dùng âm thanh mặc định
MetadataType.MUSIC_TRACK
A. --logo-image
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist hoặc MusicTrackMediaMetadata.composer
E. MusicTrackMediaMetadata.images[0]
H. Phát/Tạm dừng
Liên kết dữ liệu giao diện người dùng tuỳ chỉnh
Cast Web Receiver SDK hỗ trợ việc sử dụng phần tử trên giao diện người dùng tuỳ chỉnh của riêng bạn thay vì cast-media-player.
Tính năng liên kết dữ liệu giao diện người dùng tuỳ chỉnh cho phép bạn sử dụng phần tử giao diện người dùng tuỳ chỉnh của riêng mình và sử dụng lớp PlayerDataBinder để liên kết giao diện người dùng với trạng thái của trình phát thay vì thêm phần tử cast-media-player vào bộ nhận. Trình liên kết cũng hỗ trợ gửi các sự kiện cho những thay đổi về dữ liệu, nếu ứng dụng không hỗ trợ liên kết dữ liệu.
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();
Bạn nên thêm ít nhất một MediaElement vào HTML để Trình nhận web có thể sử dụng. Nếu có nhiều đối tượng MediaElement, bạn nên gắn thẻ MediaElement mà bạn muốn Web Receiver sử dụng. Bạn thực hiện việc này bằng cách thêm castMediaElement vào danh sách lớp của video, như minh hoạ bên dưới; nếu không, Web Receiver sẽ chọn MediaElement đầu tiên.
<video class="castMediaElement"></video>