Trải nghiệm người dùng với Nền tảng Google Cast
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Google Cast cho phép các ứng dụng web Android, iOS và Chrome "truyền trực tuyến" nội dung (như video, âm thanh và chia sẻ màn hình (phản chiếu)) đến các thiết bị hỗ trợ Cast như:
- Google Chromecast
- TV hoạt động với Google Cast
- Loa hoạt động với Google Cast
- Màn hình thông minh (màn hình LCD cảm ứng cầm tay dùng làm máy khách mỏng)
- Máy tính bảng Android
Trong mô hình tương tác với Google Cast, điện thoại di động, máy tính bảng hoặc máy tính xách tay là trình gửi đóng vai trò là điều khiển từ xa để điều khiển quá trình phát còn TV, màn hình hoặc máy tính bảng được gắn vào đế là receiver nhận hướng dẫn từ người gửi và hiển thị nội dung từ kết nối Internet của người nhận. Tất cả thao tác của người dùng (nhấn và vuốt) có thể diễn ra trên cả thiết bị của người gửi hoặc Trình nhận web.
Tính năng truyền dựa trên việc điều phối giữa hai hoặc nhiều màn hình; giao diện người dùng của trình gửi và giao diện người dùng của trình nhận — các giao diện này phải hoạt động cùng nhau. Ví dụ: nếu bạn nhấn một nút trên thiết bị di động để tạm dừng nội dung, thì TV sẽ cho biết rằng nội dung đó bị tạm dừng, trong khi thiết bị di động sẽ cung cấp nút phát để tiếp tục phát.
Những yếu tố nên cân nhắc
Do những hạn chế về phần cứng và tài nguyên, có một số hạn chế nhất định đối với các ứng dụng hỗ trợ Google Cast:
- Thiết bị truyền là thiết bị tiết kiệm pin có các hạn chế về bộ nhớ, CPU và GPU, vì vậy, ứng dụng Trình nhận web phải nhẹ nhất có thể.
- Đối với các mô hình tương tác của Cast và Google Cast, bạn có thể tạo thẻ, cửa sổ hoặc cửa sổ bật lên trong cả ứng dụng Web receiver hoặc ứng dụng gửi, cũng như trực tiếp chấp nhận hoạt động đầu vào của người dùng, chẳng hạn như nhấn hoặc vuốt. Ví dụ: ứng dụng Web Receiver trên màn hình hoặc máy tính bảng được kết nối có thể hiển thị nút tạm dừng và nhận thao tác nhấn của người dùng. Bằng cách này, tất cả thao tác trên ứng dụng phải được kích hoạt từ ứng dụng Trình nhận hoặc Trình gửi web.
- Màn hình thông minh hỗ trợ hoạt động nhập của người dùng thông qua ứng dụng gửi hoặc thông qua thao tác chạm trên giao diện người dùng.
- Web Receiver là một trình duyệt Chrome được tối ưu hoá để phát video. Do đó,
WebGL và Ứng dụng gốc của Chrome (NaCL) hiện không được hỗ trợ và
các tiện ích của Chrome cũng không được hỗ trợ.
- Tính năng Truyền hỗ trợ phát một luồng nội dung nghe nhìn đồng thời trong thẻ
<audio>
và <video>
hoặc nhiều kênh âm thanh bằng cách sử dụng API WebAudio. Chỉ một phần tử video có thể hoạt động trong DOM bất cứ lúc nào.
Ngoài ra, tính năng kết hợp, thao tác, biến đổi, xoay hoặc thu phóng video không được hỗ trợ.
Nguyên tắc thiết kế tổng thể
Hãy lưu ý những điều sau khi bạn phát triển giao diện người dùng.
Giao diện Web Receiver:
- Web receiver có thể có cả phần tử tương tác và phần tử thông tin để mô tả trạng thái ứng dụng, chẳng hạn như đang tạm dừng hoặc đang phát hoặc thông báo lỗi. Hoạt động tương tác của người dùng có thể diễn ra trên Trình truyền Cast (điện thoại, máy tính bảng hoặc trình duyệt Chrome) hoặc Trình thu web (TV, màn hình hoặc máy tính bảng).
- Hãy nhớ rằng hành động trong video đang diễn ra ở giữa màn hình TV và các thành phần trên giao diện người dùng không được cản trở nội dung trình bày. Đặt các thành phần giao diện người dùng trong phần ba dưới cùng của màn hình Web Receiver, để lại lề 10% từ các cạnh màn hình để có thể quét quá.
- Nếu có thể, quá trình chuyển đổi từ trạng thái màn hình này sang trạng thái màn hình khác phải diễn ra suôn sẻ và mang lại cảm giác điện ảnh. Thay vì chuyển đổi đột ngột từ trạng thái này sang trạng thái khác, hãy sử dụng các hiệu ứng chuyển đổi như rõ dần và rõ dần. Ví dụ: trạng thái tải nội dung vẫn hiển thị trên màn hình và mờ dần trong trải nghiệm phát nội dung nghe nhìn.
Giao diện người gửi:
- Người gửi hỗ trợ các thao tác của người dùng và Trình nhận trên web hiển thị thông tin trạng thái.
Ví dụ: nếu nội dung bị tạm dừng, thì TV sẽ cho biết rằng nội dung đó bị tạm dừng, trong khi thiết bị di động cho biết nội dung đã sẵn sàng phát (ví dụ: hiển thị cho người dùng nút phát).
- Tốc độ có ý nghĩa quan trọng. Người dùng cần có thể nhanh chóng xác định vị trí của nút điều khiển truyền và thấy nội dung bắt đầu phát ngay trên màn hình lớn. Trong khi nội dung đang tải, hãy cung cấp chỉ báo tải dạng ảnh động và sử dụng hiệu ứng chuyển đổi để giúp mọi thứ diễn ra nhanh hơn.
Cách dễ nhất để đảm bảo ứng dụng Cast tuân thủ các nguyên tắc này là xem lại giao diện người dùng bằng Danh sách kiểm tra thiết kế của Cast và kiểm thử ứng dụng Cast.
Nguyên tắc sử dụng thương hiệu
Các nguyên tắc sử dụng thương hiệu Google Cast sau đây là dành cho các nhà phát triển ứng dụng. Tập trung vào các yêu cầu bổ sung mà bạn phải tuân thủ để mô tả ứng dụng của mình bằng văn bản.
Để biết nguyên tắc sử dụng thương hiệu cho thiết bị Cast, hãy xem Partner Marketing Hub.
Bạn có thể cho người khác biết rằng ứng dụng của bạn hoạt động với Google Cast bằng cách sử dụng cụm từ "Hỗ trợ Google Cast". Tuy nhiên, hãy đảm bảo ứng dụng của bạn tuân thủ Điều khoản dịch vụ bổ sung dành cho nhà phát triển về SDK và Danh sách kiểm tra thiết kế, cũng như việc bạn sử dụng "Hỗ trợ Google Cast" tuân thủ các nguyên tắc sử dụng thương hiệu của chúng tôi.
Tương tự, bạn có thể sử dụng huy hiệu Google Cast miễn là ứng dụng hoặc thiết bị của bạn tuân thủ nguyên tắc cấp huy hiệu của chúng tôi. Google giữ quyền yêu cầu bạn sửa đổi hoặc ngừng sử dụng huy hiệu nếu huy hiệu đó không tuân thủ nguyên tắc sử dụng thương hiệu.
"Google Cast" trong văn bản
- Khi mô tả một ứng dụng (không phải sản phẩm phần cứng) là có hỗ trợ tính năng Truyền, hãy dùng cụm từ "Google Cast-enabled". Ví dụ: "Ứng dụng này hỗ trợ Google Cast".
- Khi mô tả một sản phẩm phần cứng tương thích với tính năng Truyền của bên thứ ba, hãy dùng câu lệnh "{TV} này hoạt động với Google Cast", "Các {speakers} này hoạt động với Google Cast".
- Khi viết bằng văn bản, bạn phải viết hoa "Google" và "Cast".
- Trong mọi tài sản tiếp thị sử dụng "Google Cast" trong văn bản hoặc huy hiệu/biểu trưng, bạn phải thêm nội dung ghi công pháp lý sau: Google Cast là nhãn hiệu của Google LLC.
- Đừng đặt Google Cast trong tiêu đề của ứng dụng (chẳng hạn như Ứng dụng Google Cast XYZ).
Tính năng nhắn tin trên ứng dụng hỗ trợ Google Cast
Bạn có thể quảng bá ứng dụng của mình như sau:
- "XYZ là một ứng dụng hỗ trợ Google Cast, cho phép bạn truyền trực tuyến nội dung giải trí yêu thích từ thiết bị di động sang TV".
- "Ứng dụng XYZ hiện đã có cho những TV hoạt động với Google Cast."
- "Ứng dụng XYZ hiện đã có cho tất cả các sản phẩm Google Cast, bao gồm cả Google Chromecast, Google Cast Audio, cũng như TV và loa hoạt động với Google Cast".
- "Ứng dụng XYZ hỗ trợ Google Cast, cho phép bạn thưởng thức tất cả chương trình/phim/nhạc/trò chơi yêu thích trên TV có hỗ trợ Google Cast."
- "Ứng dụng XYZ hiện đã hỗ trợ Google Cast, cho phép người dùng truyền trực tuyến nội dung từ điện thoại sang TV có hỗ trợ Google Cast."
Huy hiệu Google Cast
Bạn có thể sử dụng huy hiệu "Google Cast" trên trang web, trang thông tin trên cửa hàng ứng dụng, tài liệu tiếp thị và tài liệu quảng bá để cho thấy khả năng tương thích với các thiết bị sử dụng giao thức Cast.
- Đừng sửa đổi màu sắc, tỷ lệ, khoảng cách hoặc bất kỳ khía cạnh nào khác của hình ảnh huy hiệu.
- Khi được sử dụng cùng với biểu trưng của các công nghệ thành phần khác (ví dụ: Bluetooth, Spotify Connect, AirPlay, v.v.), huy hiệu Google Cast phải có kích thước bằng hoặc lớn hơn.
- Đừng đặt huy hiệu làm thành phần chính trên trang.
- Giữ khoảng cách giữa huy hiệu với các biểu trưng và biểu tượng khác trên trang.
- Khi sử dụng trên nền trắng, sáng hoặc trung tính, hãy sử dụng huy hiệu màu đen.
- Khi sử dụng trên nền đen hoặc nền tối, hãy sử dụng huy hiệu màu trắng.
- Không được sử dụng huy hiệu này trên trang chứa hoặc hiển thị nội dung người lớn, cổ xuý hành vi đánh bạc, kích động bạo lực, chứa lời nói hận thù, liên quan đến việc bán thuốc lá hoặc đồ uống có cồn cho người dưới 21 tuổi, vi phạm các luật hay quy định hiện hành khác hoặc gây phản cảm.
Liên kết huy hiệu
Khi được sử dụng trên mạng, huy hiệu Google Cast phải liên kết đến một trong những nội dung sau:
- Danh sách các sản phẩm và ứng dụng hỗ trợ Google Cast của Google tại g.co/castapps.
- Danh sách sản phẩm mà bạn xuất bản.
- Một trang chi tiết sản phẩm cụ thể do bạn xuất bản.
- Danh sách ứng dụng do bạn phát hành.
- Một trang chi tiết ứng dụng cụ thể do bạn xuất bản trên Google Play hoặc trong App Store của Apple.
Tải các thành phần của huy hiệu Google Cast xuống
Gói tải xuống bao gồm các định dạng Đồ hoạ mạng di động (.png), Adobe Illustrator (.ai) và Enapsulated Postscript (.eps).
Xem trước huy hiệu Google Cast
Hãy tham khảo trang Nguyên tắc sử dụng huy hiệu trên Trung tâm đối tác để biết tất cả huy hiệu hiện có và hướng dẫn sử dụng.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-07-25 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-07-25 UTC."],[[["\u003cp\u003eGoogle Cast enables streaming of content like video and audio from Android, iOS, and Chrome to compatible devices.\u003c/p\u003e\n"],["\u003cp\u003eThe sender device (phone, tablet, laptop) acts as a remote, while the receiver device (TV, speaker, display) plays the content.\u003c/p\u003e\n"],["\u003cp\u003eBoth sender and receiver UIs must be coordinated for a seamless user experience, with actions reflected on both.\u003c/p\u003e\n"],["\u003cp\u003eWeb Receiver applications should be lightweight due to device limitations, and interactive elements should be strategically placed for optimal viewing.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast branding guidelines must be followed when promoting app compatibility, including using the approved badge and messaging.\u003c/p\u003e\n"]]],["Google Cast enables content streaming from sender devices (phones, tablets, laptops) to receiver devices (Chromecast, Cast-enabled TVs/speakers/displays). Senders act as remote controls, while receivers display content from their internet connection. Both sender and receiver UIs coordinate actions like pausing/playing. Design considerations include lightweight receiver apps, UI placement within the lower third of the screen, and smooth transitions. Apps can be described as \"Google Cast-enabled\" and use a Google Cast badge, following specific branding guidelines and linking requirements.\n"],null,["# User Experience With the Google Cast Platform\n\nGoogle Cast allows Android, iOS, and Chrome web apps to \"stream\" content ---\nlike video, audio and screen sharing (mirroring) --- to Cast-ready devices\nlike:\n\n- Google Chromecast\n- TVs that work with Google Cast\n- Speakers that work with Google Cast\n- Smart Displays (a portable touchscreen LCD monitor used as a thin client)\n- Android Tablets\n\nIn the Google Cast interaction model, the mobile phone, tablet or laptop is the\n**sender** which acts as a remote control to control the playback, and the TV,\ndisplay or docked tablet is the **receiver** which receives instructions from\nthe sender and displays the content from the receiver's Internet connection. All\nthe user actions (taps and swipes) can take place on **both** the sender device\nor the Web Receiver.\n\nCasting relies on the coordination between two or more screens; the sender UI\nand the receiver UI --- they must work together. For example, if you press a\nbutton on a mobile device to pause the content, the TV should indicate that it\nis paused, while the mobile device should provide a play button to resume\nplayback.\n\nConsiderations\n--------------\n\nDue to hardware and resource limitations, there are certain restrictions placed\non Google Cast-enabled applications:\n\n- The Cast device is a low-power device with memory, CPU and GPU limitations, so the Web Receiver application should be as lightweight as possible.\n- For Cast and Google Cast interaction models, tabs, windows or popups can be created in both the Web Receiver or sender app, as well as directly accept user input, such as taps or swipes. For example, the Web Receiver app on a docked tablet or display can display a pause button and receive a user's tap. In this way, *all* actions on the application must be triggered from either a Web Receiver or sender application.\n- Smart Displays support user input through a sender app or via touch on the UI.\n- The Web Receiver is a Chrome browser optimized for video playback. As such, WebGL and Chrome Native Client (NaCL) are not currently supported, nor are Chrome extensions.\n- Cast supports a single concurrent media stream playback in the `\u003caudio\u003e` and `\u003cvideo\u003e` tags, or multiple audio tracks using the WebAudio API. Only one video element may be active in the DOM at any time. Additionally, video compositing, manipulation, transformations, rotations or zooming are not supported.\n\nOverall design principles\n-------------------------\n\nKeep the following in mind as you develop your user interface.\n\n**Web Receiver interface:**\n\n- The Web Receiver can have both interactive elements and informational elements to describe the state of the app, such as paused or playing, or error messages. User interaction can take place on the Cast sender (phone, tablet, or Chrome browser) or the Web Receiver (TV, displays, or tablets).\n- Remember that the video action is happening in the middle of the TV screen, and your UI elements should not interfere with the presentation. Place UI elements within the lower third of the Web Receiver display, leaving a 10% margin from the edges of the screen for possible [overscan](/cast/docs/caf_receiver/customize_ui#overscan).\n- When possible, transitions from one screen state to another should be smooth and feel cinematic. Rather than abrupt moves from state to state, use transitions like fade-in and fade-out. For example, the content-loading state lingers on-screen and fades into the media playing experience.\n\n**Sender interface:**\n\n- The sender supports user actions and the Web Receiver displays state information. For example, if content is paused, the TV should indicate that it is paused, while the mobile device indicates it is ready to start playing (for example, showing the user a play button).\n- Speed matters. Users need to be able to quickly locate the casting control and see content start playing immediately on the large screen. While content is loading, provide animated loading indicators and use transitions to help make things feel faster.\n\nThe easiest way to ensure that your Cast application follows these principles is\nto review your user interface with the Cast [Design Checklist](/cast/docs/design_checklist)\nand [test your Cast applications](/cast/docs/testing).\n\nBrand guidelines\n----------------\n\nThe following Google Cast brand guidelines are for app developers and focus on\nthe additional requirements you must comply with to describe your app in text.\nFor Cast devices brand guidelines see the\n[Partner Marketing Hub](https://partnermarketinghub.withgoogle.com/brands/google-cast/overview/brand-introduction/).\nYou can let others know that your app works with Google Cast by using\nthe term \"Google Cast-enabled\". However be sure that your app complies\nwith the Cast [SDK Additional Developer Terms of Service](/cast/docs/terms)\nand the [Design Checklist](/cast/docs/design_checklist), and that your\nuse of \"Google Cast-enabled\" complies with our branding guidelines.\n\nYou can similarly use a [Google Cast badge](#google_cast_badge)\nas long as your app or device complies with our badging guidelines. Google\nreserves the right to request that you modify or cease your use of the badge if\nit does not comply with the brand guidelines.\n\n### \"Google Cast\" in text\n\n- When describing an app (not a hardware product) as being Cast-enabled, use the phrase \"Google Cast-enabled\". For example: \"This app is Google Cast-enabled\".\n- When describing a Cast compatible third-party hardware product, use \"This {TV} works with Google Cast\", \"These {speakers} work with Google Cast\".\n- When written in text, \"Google\" and \"Cast\" should be capitalized.\n- In any marketing asset that uses \"Google Cast\" in text or the badge/logo, you must include the following legal attribution: Google Cast is a trademark of Google LLC.\n- Don't put Google Cast in the title of the app (such as XYZ Google Cast App).\n\n### Google Cast-enabled app messaging\n\nYou can promote your app as follows:\n\n- \"XYZ is a Google Cast-enabled app which lets you stream your favorite entertainment from your mobile device to your TV.\"\n- \"The XYZ app is now available for TVs that work with Google Cast.\"\n- \"The XYZ app is now available for all Google Cast products including Google Chromecast, Google Cast Audio, and TVs and speakers that work with Google Cast.\"\n- \"The XYZ app is Google Cast-enabled, allowing you to enjoy all your favorite shows/movies/music/games on your TV that works with Google Cast.\"\n- \"The XYZ app now has Google Cast support, allowing users to stream content from their phone to their TV that works with Google Cast.\"\n\n### Google Cast badge\n\nYou can use the \"Google Cast\" badges on your website, app store listing,\nmarketing materials and promotional materials to display compatibility with\ndevices that use the Cast protocol.\n\n- Don't modify the color, proportions, spacing or any other aspect of the badge image.\n- When used alongside logos for other ingredient technologies (for example, Bluetooth, Spotify Connect, AirPlay, etc.), the Google Cast badge must be of equal or greater size.\n- Don't make the badge the primary element on your page.\n- Keep some distance between the badge and other logos and icons on your page.\n- When used on white, light, or medium-toned background, use a black badge.\n- When used on a black or dark-toned background, use the white badge.\n- Don't use the badge on a page that contains or displays adult content, promotes gambling, promotes violence, contains hate speech, involves the sale of tobacco or alcohol to persons under twenty-one years of age, violates other applicable laws or regulations or is otherwise objectionable.\n\n### Badge linking\n\nWhen used online, the Google Cast badge must link to one of the following:\n\n- Google's list of Google Cast-enabled apps and products at [g.co/castapps](http://g.co/castapps).\n- A list of products published by you.\n- A specific product detail page published by you.\n- A list of apps published by you.\n- A specific app detail page published by you, on Google Play, or in the Apple App Store.\n\n### Download Google Cast badge assets\n\nThe download bundle includes Portable Network Graphics (.png), Adobe\nIllustrator (.ai), and Enapsulated Postscript (.eps) formats.\n\n- [Partner Hub Downloads page](https://partnermarketinghub.withgoogle.com/brands/google-cast/downloads/)\n\n### Preview Google Cast badges\n\nRefer to the [Partner Hub Badges Guidelines page](https://partnermarketinghub.withgoogle.com/brands/google-cast/visual-identity/visual-identity/#badge-guidelines)\nfor all available badges and instructions on usage."]]