Bộ thu nội dung nghe nhìn được tạo kiểu (SMR) cho phép ứng dụng của người gửi phát nội dung nghe nhìn trên thiết bị truyền mà không cần tạo ứng dụng bộ nhận tuỳ chỉnh của riêng bạn. Bạn có thể tuỳ chỉnh bảng phối màu và thương hiệu SMR bằng cách cung cấp tệp CSS của riêng mình trong quá trình đăng ký.
Đăng ký
Để sử dụng SMR cho ứng dụng của bạn, hãy chọn tuỳ chọn Styled Media receiver (Bộ thu nội dung nghe nhìn được định kiểu) khi bạn thêm ứng dụng mới trong Google Cast SDK Developer Console. Hãy xem phần Đăng ký để biết thêm thông tin. Tuỳ chọn này bao gồm một đường liên kết để Xem trước biểu định kiểu mặc định cũng như một trường để bạn nhập URL vào biểu định kiểu. Bạn có thể sử dụng các kiểu mặc định hoặc cung cấp URL loại HTTPS cho tệp CSS. Bạn có thể sử dụng máy chủ của riêng mình để lưu trữ tệp CSS. Sau khi cung cấp URL cho tệp CSS, bạn có thể nhấp vào Xem trước để xem kiểu của bạn sẽ trông như thế nào trên trình nhận.
Nội dung nghe nhìn được hỗ trợ
Tất cả bộ thu đều hỗ trợ các loại nội dung nghe nhìn, như mô tả trong Nội dung nghe nhìn được hỗ trợ.
SMR hỗ trợ video, âm thanh và hình ảnh, được kiểm soát qua ứng dụng của người gửi bằng kênh truyền thông SDK Cast. SMR hoàn toàn tuân thủ Nguyên tắc trải nghiệm người dùng đối với việc phát nội dung đa phương tiện trên Thiết bị truyền.
Nhập phông chữ
Xem phần Phông chữ đã cài đặt sẵn để biết danh sách các phông chữ đã cài đặt sẵn trong bộ thu.
CSS
Trình thu nhận nội dung đa phương tiện được tạo kiểu sử dụng các lớp CSS sau:
- .background: Nền cho trình thu nhận.
- .logo: Biểu trưng xuất hiện khi trình thu nhận chạy. Lớp này cũng được dùng khi receiver ở trạng thái rảnh và không có lớp .splash nào được khai báo.
- .progressBar: Thanh tiến trình để phát nội dung đa phương tiện.
- .splash: Màn hình hiển thị khi trình thu nhận ở trạng thái rảnh. Nếu lớp này không được khai báo, thì receiver sẽ đặt mặc định là .logo hoặc tên ứng dụng.
- .watermark: Hình mờ xuất hiện khi nội dung nghe nhìn đang phát.
Dưới đây là ví dụ về tệp CSS sử dụng các lớp này:
.background {
background: center no-repeat url(background.png);
}
.logo {
background-image: url(logo.png);
}
.progressBar {
background-color: rgb(238, 255, 65);
}
.splash {
background-image: url(splash.png);
}
.watermark {
background-image: url(watermark.png);
background-size: 57px 57px;
}
Sau đây là một số hình minh hoạ các lớp này đang được sử dụng.
Video
Lưu ý: Hình ảnh video có kích thước 96 x 143 pixel và tài nguyên hình ảnh đầu tiên liên kết với siêu dữ liệu nội dung đa phương tiện được chọn để hiển thị. Hình ảnh được điều chỉnh theo tỷ lệ để phù hợp với kích thước dự kiến.
Âm thanh
Lưu ý: Ảnh bìa đĩa nhạc âm thanh có kích thước 384 x 384 pixel và tài nguyên hình ảnh đầu tiên liên kết với siêu dữ liệu nội dung đa phương tiện sẽ được chọn để hiển thị. Hình ảnh được điều chỉnh theo tỷ lệ để phù hợp với kích thước dự kiến.
Hình ảnh từ Big Buck Bunny: (c) bản quyền năm 2008, Binder Foundation / www.bigbuckbunny.org
Hình ảnh từ Sintel: (c) bản quyền Blender Foundation / www.sintel.org