Nút truyền
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.
Nút Truyền sẽ mở một hộp thoại để kết nối, điều khiển và ngắt kết nối với Web Receiver.
Hãy xem phần Biểu tượng Truyền để tải các mẫu nút Truyền xuống.
Xin lưu ý rằng nút Truyền không dành riêng cho Google Cast; nút này có thể dùng để biểu thị cả Web Receiver và non-Web Receiver (chẳng hạn như tai nghe Bluetooth). Web Receiver phải luôn xuất hiện trong hộp thoại Truyền và không bao giờ xuất hiện trong hộp thoại, trình đơn hoặc chế độ điều khiển khác.
Việc giới thiệu nút Truyền giúp người dùng hiện tại biết rằng ứng dụng người gửi hiện hỗ trợ tính năng Truyền và cũng giúp những người dùng mới biết đến Google Cast.
Bắt buộc
A Hiện màn hình giới thiệu về tính năng Truyền vào lần đầu tiên Bộ nhận web có sẵn. Đối với người gửi trên iOS, hãy cho thấy màn hình giới thiệu về tính năng Truyền lần đầu tiên nút Truyền xuất hiện.
B Nhấn mạnh bằng hình ảnh nút Truyền bằng cách khoanh tròn nút đó)
C Giải thích cách hoạt động của nút Truyền (ví dụ: hiển thị một thông báo như "Nhấn để truyền video đến TV")
Android
Giới thiệu về tính năng truyền
Truyền màn hình chính
iOS
Giới thiệu về tính năng truyền
Truyền màn hình chính
Chrome
Giới thiệu về tính năng truyền
Truyền màn hình chính
Bắt buộc
A Nút Truyền phải xuất hiện trên mọi màn hình có nội dung có thể phát và nằm ở vị trí nhất quán trong khi duyệt xem hoặc phát nội dung. Biểu tượng này cũng sẽ xuất hiện trong tiêu đề của Chrome để bạn có thể kiểm soát trên toàn cầu.
B Trong Chrome, nút Truyền có thể bị ẩn khi Bộ nhận web không hoạt động. Đối với thiết bị gửi Android và iOS, nút Truyền luôn phải xuất hiện khi thiết bị đang kết nối Wi-Fi, để có thể cung cấp trợ giúp phù hợp nếu người dùng đã tắt quyền truy cập vào mạng cục bộ và do đó không thể phát hiện thấy các thiết bị (xem phần Quyền và khả năng phát hiện trên iOS để biết thêm thông tin).
C Trong ứng dụng di động, nút Truyền phải ở bên phải.
D Trong Chrome, nút Truyền sẽ nằm ở bên phải trong các nút điều khiển nội dung nghe nhìn (ví dụ: xem video được nhúng). Nếu các chế độ điều khiển nội dung nghe nhìn có nút toàn màn hình, hãy đặt nút Truyền ở bên trái nút đó.
Lưu ý
Google Cast sử dụng mô hình đa nhiệm, cho phép người dùng duyệt xem ứng dụng người gửi và các ứng dụng khác trong khi truyền. Nút Truyền phải xuất hiện trên mọi màn hình có nội dung phát được, để người dùng không phải tìm kiếm vị trí tạm dừng hoặc dừng nội dung đang phát trên TV.
Android
Người gửi đã ngắt kết nối
Truyền màn hình chính
iOS
Người gửi đã ngắt kết nối
Truyền màn hình chính
Chrome
Người gửi đã ngắt kết nối
Truyền màn hình chính
Bắt buộc
A Ngắt kết nối: Khi có Web Receiver, nút Truyền sẽ xuất hiện
B Đang kết nối: Khi Web Receiver đang kết nối, nút Truyền sẽ tạo hiệu ứng sóng trong biểu tượng một cách liên tục (để biết chi tiết, hãy xem phần lưu ý bên dưới)
C Đã kết nối: Khi ứng dụng này kết nối với Cast Web Receiver, nút Truyền của ứng dụng sẽ xuất hiện với hình khung được tô màu
Các phương pháp hay
Đối với từng trạng thái của nút, hãy sử dụng màu sắc phù hợp với kiểu của các phần tử giao diện người dùng khác trong ứng dụng. Bạn có thể sử dụng màu làm nổi bật riêng biệt (chẳng hạn như màu vàng) cho trạng thái BẬT / Đã kết nối.
Lưu ý
- Biểu tượng Truyền xuất hiện trên Chrome, Android và iOS để cung cấp quyền truy cập vào tiện ích Truyền bất kể thiết bị Truyền có sẵn hay không.
- Trạng thái Đang kết nối (có hiệu ứng chuyển động) xuất hiện khi quá trình kết nối với Cast API mất nhiều thời gian hơn dự kiến (SDK Android và Chrome sẽ tự động tạo hiệu ứng chuyển động cho biểu tượng Truyền). Sau khi kết nối, ứng dụng Web Receiver sẽ khởi chạy.
- Trạng thái BẬT / Đã kết nối của biểu tượng Truyền đã được cập nhật và hiện sử dụng một màu tô đồng nhất trong khung biểu tượng. Biểu tượng Cast mới và các mẫu biểu tượng có
tại đây.
Android
Người gửi, Truyền bị ngắt kết nối
Truyền màn hình chính
Người gửi, Truyền đang kết nối
Truyền màn hình chính
Người gửi, đã kết nối với thiết bị truyền
Đang tải ứng dụng Web Receiver
Người gửi, đã kết nối với thiết bị truyền
Ứng dụng Web Receiver đã tải / đang ở trạng thái chờ
iOS
Người gửi, Cast chưa có sẵn
Truyền màn hình chính
Người gửi, Truyền bị ngắt kết nối
Truyền màn hình chính
Người gửi, Truyền đang kết nối
Truyền màn hình chính
Người gửi, đã kết nối với thiết bị truyền
Đang tải ứng dụng Web Receiver
Người gửi, đã kết nối với thiết bị truyền
Ứng dụng Web Receiver đã tải / đang ở trạng thái chờ
Chrome
Người gửi, Cast chưa có sẵn
Biểu tượng Truyền xuất hiện trong Chrome để cung cấp quyền truy cập vào tiện ích Truyền bất kể trạng thái kết nối.
Truyền màn hình chính
Người gửi, Truyền bị ngắt kết nối
Truyền màn hình chính
Người gửi, Truyền đang kết nối
Truyền màn hình chính
Người gửi, đã kết nối với thiết bị truyền
Đang tải ứng dụng Web Receiver
Người gửi, đã kết nối với thiết bị truyền
Ứng dụng Web Receiver đã tải / đang ở trạng thái chờ
Hình ảnh được dùng trong hướng dẫn thiết kế này
là của Blender Foundation, được chia sẻ theo bản quyền hoặc giấy phép Creative Commons.
- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute /
www.elephantsdream.org
- Sintel: (c) copyright Blender Foundation | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
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-26 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-07-26 UTC."],[[["\u003cp\u003eThe Cast button, used for connecting to Web Receivers and other devices, should be visible on every screen with playable content.\u003c/p\u003e\n"],["\u003cp\u003eUsers should be introduced to the Cast button's functionality with a highlight and explanatory message, especially on first use.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button has distinct visual states (Disconnected, Connecting, Connected) to indicate the connection status.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button should be consistently positioned, typically on the right side of the UI in mobile apps and Chrome's content media controls.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast allows for multitasking, enabling users to browse other apps while casting content.\u003c/p\u003e\n"]]],["The Cast button facilitates connections to Web Receivers, allowing users to control and disconnect. It should be consistently visible on all screens with playable content, positioned on the right in mobile apps and to the left of the fullscreen button in Chrome media controls. The button has distinct states: disconnected, connecting (animated), and connected (filled frame). Users should receive an introduction to the Cast feature, including visual highlights and explanatory messages.\n"],null,["# Cast Button\n\nThe Cast button opens a dialog to connect, control, and disconnect from Web Receivers.\n\nSee [Cast icons](/cast/docs/get-started#download_cast_icons_optional) to download the Cast button templates.\n\nNote that the Cast button is not specific to Google Cast; it can be used to represent both Web\nand non-Web Receivers (like Bluetooth headsets). Web Receivers should always appear under the\nCast dialog, and never under another dialog, menu, or control.\n\n### [Introduce Cast to users](#prompting)\n\nIntroducing the Cast button helps existing users know that the sender app now supports Casting\nand also helps users new to Google Cast.\n\n\n**Required**\n\n\nA Show a Cast introduction screen the first time\nWeb Receivers are available. For iOS senders, show a Cast introduction\nscreen the first time the Cast button appears.\n\n\nB Visually highlight the Cast button by circling the\nbutton)\n\n\nC Explain how the Cast button works (for example,\ndisplaying a message such as \"Touch to cast videos to your TV\") \n\n### Android\n\nCast introduction \nCast home screen \n\n### iOS\n\nCast introduction \nCast home screen \n\n### Chrome\n\nCast introduction \nCast home screen \n\n### [Cast button availability](#sender-cast-icon-available)\n\n\n**Required**\n\n\nA The Cast button must\nbe visible from every screen where there is playable content, and located in a consistent position\nwhile browsing or playing content. It will also appear in Chrome's header for global control.\n\n\nB In Chrome, the Cast button can be hidden\nwhen Web Receivers aren't available. For Android and iOS senders,\nthe Cast button should always display when the device is on Wi-Fi, so proper help can be given\nif the user has turned off local network access and devices become undiscoverable as a result\n(see [iOS Permissions and Discovery](/cast/docs/ios_sender/permissions_and_discovery)\nfor more details).\n\n\nC In mobile apps, the Cast button should be on the right\nside.\n\n\nD In Chrome, the Cast button should be on the right side in\nthe content media controls (for example, see embedded video). If the media controls contain a fullscreen\nbutton, place the Cast button to the left of it.\n\n**Note**\n\nGoogle Cast employs a multi-tasking model, which allows users to browse the sender app and\nother apps while casting. The Cast button must be visible from every screen where there is\nplayable content, so the user doesn't have to hunt to find where to pause or stop the content\nplaying on TV. \n\n### Android\n\nSender disconnected \nCast home screen \n\n### iOS\n\nSender disconnected \nCast home screen \n\n### Chrome\n\nSender disconnected \nCast home screen \n\n### [Cast button states](#sender-cast-icon-states)\n\n\n**Required**\n\n\nA Disconnected: When Web Receivers are available, the\nCast button appears\n\n\nB Connecting: When the Web Receiver is connecting, the\nCast button animates the waves in the icon progressively (for details, see note below)\n\n\nC Connected: When this app is connected to the Cast\nWeb Receiver, its Cast button appears with a filled frame shape\n\n\n**Best practices**\n\n\nFor each of the button states, use colors that match the style of other UI\nelements of your app. Using a distinct highlight color (such as yellow) for the ON / Connected\nstate is optional.\n\n\n**Notes**\n\n- The Cast icon displays on Chrome, Android, and iOS to provide access to the Cast extension regardless of the availability of Cast devices.\n- The Connecting (animated) state appears when the connection to the Cast API takes longer than expected (the Android and Chrome SDK's will automatically animate the Cast icon). Once connected, the Web Receiver app launches.\n- The ON / Connected state of the Cast icon has been updated and now uses a solid fill within the icon frame. The new Cast icon and icon templates are available [here](/cast/docs/get-started#download_cast_icons_optional).\n\n\u003cbr /\u003e\n\n### Android\n\nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### iOS\n\nSender, Cast unavailable \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### Chrome\n\nSender, Cast unavailable\n\nThe Cast icon displays in Chrome to provide access to the Cast extension regardless of the connection state. \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]
