SDK Bộ thu trên web 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 trong ứng dụng Web receiver tuỳ chỉnh, bạn cần thêm phần tử cast-media-player vào phần 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 của trình phát, hình ảnh chờ, bộ phông chữ, v.v. Bạn có thể thêm các biến này bằng kiểu CSS nội dòng, 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 khu vực của phần tử trình phát nội dung đa phương tiện. Bạn có thể sử dụng các mẫu sau đây để 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 của tính năng phát
Biểu trưng phát xuất hiện ở góc trên bên trái của bộ thu trong khi nội dung nghe nhìn 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 từ 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
Các biến --background đặt các 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àu chuyển màu tuyến tính trắng và bạc:
cast-media-player {
--background-image: linear-gradient(white, silver);
}
Màn hình Bộ thu web:
Bạn có thể dùng các biến sau để tuỳ chỉnh các thuộc tính .background:
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Nội dung mô tả |
|---|---|---|
| --nền | đen | Tài sản nền CSS |
| --background-color | Thuộc tính màu nền CSS | |
| --background-image | Thuộc tính hình nền CSS | |
| --background-repeat | không lặp lại | Thuộc tính lặp lại trong nền của CSS |
| --background-size | bản cover | Tài sản kích thước nền CSS |
Mẫu CSS
cast-media-player {
--background:
--background-color:
--background-image:
--background-repeat:
--background-size:
}
Thuộc tính của biểu trưng
Lớp .logo được đặt phía trước lớp .background và trải rộng ra toàn bộ trình phát. Lớp này sẽ hiển thị khi bộ thu của bạn chạy. Nếu bạn không cung cấp biến .splash nào, lớp .logo cũng sẽ hiển thị khi trình thu 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 âm thanh có tên welcome.png. Theo mặc định, hình ảnh sẽ nằm ở giữa trình nhận của bạn:
cast-media-player {
--logo-image: url('welcome.png');
}
Màn hình Bộ thu web:
Bạn có thể dùng các biến sau để tuỳ chỉnh các thuộc tính .logo:
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Nội dung mô tả |
|---|---|---|
| --logo-background | Tài sản nền CSS | |
| --logo-color | Thuộc tính màu nền CSS | |
| --logo-image | Thuộc tính hình nền CSS | |
| --logo-repeat | không lặp lại | Thuộc tính lặp lại trong nền của CSS |
| --logo-size | Tài sản kích thước nền CSS |
Mẫu CSS
cast-media-player {
--logo-background:
--logo-color:
--logo-image:
--logo-repeat:
--logo-size:
}
Thuộc tính Splash
Tương tự như lớp .logo, lớp .splash sẽ bao gồm toàn bộ trình phát. Nếu
bạn đặt các thuộc tính này, thì biến .splash sẽ ghi đè biến .logo
khi trình nhận của bạn ở trạng thái rảnh. Tức là bạn có thể sử dụng một bộ thuộc tính .logo khi khởi chạy, đồng thời hiển thị các nền hoặc hình ảnh riêng biệt khi receiver ở 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 và thêm biểu tượng phục vụ... động:
cast-media-player {
--splash-color: dimgray;
--splash-image: url('waiting.png');
}
Màn hình Bộ thu web:
Nếu bạn không thiết lập các thuộc tính này, thì trình thu nhận sẽ mặc định sử dụng chế độ cài đặt .logo hoặc tên ứng dụng khi ứng dụng ở trạng thái rảnh.
Bạn có thể dùng các biến sau để tuỳ chỉnh các thuộc tính .splash:
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Nội dung mô tả |
|---|---|---|
| --splash-background | Tài sản nền CSS | |
| --splash-color | Thuộc tính màu nền CSS | |
| --splash-image | Thuộc tính hình nền CSS | |
| --splash-repeat | Thuộc tính lặp lại trong nền của CSS | |
| --splash-size | Tài sản kích thước nền 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 xoay vòng khi ở trạng thái rảnh (thay cho hình ảnh chờ), hãy sử dụng các tham số trình chiếu sau.
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Nội dung 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 bản 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 bản 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 hình mờ
.watermark sẽ hiển thị trong khi nội dung nghe nhìn đang phát. Đây thường là một hình ảnh nhỏ, trong suốt theo mặc định nằm ở phía dưới cùng bên phải của receiver.
Bạn có thể dùng các biến sau để tuỳ chỉnh các thuộc tính .watermark:
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Nội dung mô tả |
|---|---|---|
| --watermark-background | Tài sản nền CSS | |
| --watermark-color | Thuộc tính màu nền CSS | |
| --watermark-image | Thuộc tính hình nền CSS | |
| --watermark-position | dưới cùng bên phải | Thuộc tính vị trí nền của CSS |
| --watermark-repeat | không lặp lại | Thuộc tính lặp lại trong nền của CSS |
| --watermark-size | Tài sản kích thước nền CSS |
Mẫu CSS
cast-media-player {
--watermark-background:
--watermark-color:
--watermark-image:
--watermark-position:
--watermark-repeat:
--watermark-size:
}
Tính năng 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 từ
bộ chọn cast-media-player.
Biến và giá trị mặc định
| Tên | Giá trị mặc định | Nội dung 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(màu sắc; 100%; 50%) | Màu cho dấu 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 hiển thị khi khởi chạy. |
| --buffering-image | Hình ảnh mặc định | Hình ảnh hiển thị trong khi lưu vào bộ đệm. |
| --pause-image | Hình ảnh mặc định | Hình ảnh hiển thị khi tạm dừng. |
| --play-image | Hình ảnh sẽ hiển thị trong siêu dữ liệu khi phát. | |
| --theme-hue | 42 | Màu sắc để sử dụng cho trình phát. |
| --progress-color | hsl(hue; 95%; 60%) | Màu cho 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 Bộ thu nội dung đa phương tiện được tạo kiểu.
Quét quá
Bố cục cho TV có một số yêu cầu riêng biệt do sự phát triển của các tiêu chuẩn truyền hình và mong muốn luôn hiển thị hình ảnh toàn màn hình cho người xem. Thiết bị TV có thể cắt cạnh bên ngoài của bố cục ứng dụng để đảm bảo rằng toàn bộ màn hình được lấp đầy. Hành vi này thường được gọi là quét quá mức. Tránh các thành phần màn hình bị cắt do quét quá mức bằng cách thêm biên độ 10% ở mọi bên của bố cục.
Giao diện người dùng âm thanh mặc định
MetadataType.MUSIC_TRACK
Đáp: --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
SDK Cast Web receiver hỗ trợ việc sử dụng thành phầ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 thành phần 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 trình phát thay vì thêm phần tử cast-media-player vào trình thu nhận. Trình liên kết cũng hỗ trợ gửi các sự kiện cho các 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 thu 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 Trình thu nhận web 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ạ dưới đây; nếu không, Trình thu nhận web sẽ chọn MediaElement đầu tiên.
<video class="castMediaElement"></video>