Кнопка трансляции
Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Кнопка Cast открывает диалоговое окно для подключения, управления и отключения от веб-приемников.
См. Значки трансляции , чтобы загрузить шаблоны кнопок трансляции.
Обратите внимание, что кнопка Cast не предназначена только для Google Cast; его можно использовать для представления как веб-, так и не-веб-приемников (например, гарнитур Bluetooth). Веб-приемники всегда должны появляться в диалоговом окне трансляции и никогда в другом диалоговом окне, меню или элементе управления.
Кнопка Cast поможет существующим пользователям узнать, что приложение-отправитель теперь поддерживает трансляцию, а также поможет пользователям, впервые использующим Google Cast.
Необходимый
Отображение вводного экрана Cast при первой доступности веб-ресиверов. Для отправителей iOS покажите вводный экран Cast при первом появлении кнопки Cast.
B Визуально выделите кнопку трансляции, обведя ее)
C Объясните, как работает кнопка трансляции (например, отображение такого сообщения, как «Нажмите, чтобы транслировать видео на телевизор»).
Андроид
Знакомство с актерами
Трансляция главного экрана
iOS
Знакомство с актерами
Трансляция главного экрана
Хром
Знакомство с актерами
Трансляция главного экрана
Необходимый
Кнопка трансляции должна быть видна на каждом экране, где есть воспроизводимый контент, и располагаться в одинаковом положении во время просмотра или воспроизведения контента. Он также появится в заголовке Chrome для глобального управления.
B В Chrome кнопку трансляции можно скрыть, если веб-приемники недоступны. Для отправителей Android и iOS кнопка Cast должна всегда отображаться, когда устройство подключено к Wi-Fi, поэтому можно оказать необходимую помощь, если пользователь отключил доступ к локальной сети, и в результате устройства становятся недоступными для обнаружения (см. раздел Разрешения и обнаружение iOS для подробнее).
C В мобильных приложениях кнопка трансляции должна находиться справа.
D В Chrome кнопка Cast должна находиться справа в элементах управления мультимедиа (например, см. встроенное видео). Если элементы управления мультимедиа содержат полноэкранную кнопку, поместите кнопку Cast слева от нее.
Примечание
Google Cast использует многозадачную модель, которая позволяет пользователям просматривать приложение-отправитель и другие приложения во время трансляции. Кнопка трансляции должна быть видна на каждом экране, где есть воспроизводимый контент, чтобы пользователю не приходилось искать, где приостановить или остановить воспроизведение контента на телевизоре.
Андроид
Отправитель отключен
Трансляция главного экрана
iOS
Отправитель отключен
Трансляция главного экрана
Хром
Отправитель отключен
Трансляция главного экрана
Необходимый
A Отключено: если веб-приемники доступны, появляется кнопка трансляции.
B Подключение: когда веб-приемник подключается, кнопка Cast постепенно анимирует волны на значке (подробнее см. примечание ниже).
C Подключено: когда это приложение подключено к веб-приемнику Cast, его кнопка Cast отображается в форме заполненной рамки.
Лучшие практики
Для каждого состояния кнопки используйте цвета, соответствующие стилю других элементов пользовательского интерфейса вашего приложения. Использование отдельного цвета подсветки (например, желтого) для состояния ВКЛ/Подключено не является обязательным.
Примечания
- Значок Cast отображается в Chrome, Android и iOS, обеспечивая доступ к расширению Cast независимо от доступности устройств Cast.
- Состояние подключения (анимированное) появляется, когда подключение к API Cast занимает больше времени, чем ожидалось (SDK Android и Chrome автоматически анимирует значок Cast). После подключения запустится приложение Web Receiver.
- Состояние «ВКЛ/Подключено» значка трансляции было обновлено, и теперь в рамке значка используется сплошная заливка. Новый значок Cast и шаблоны значков доступны здесь .
Андроид
Отправитель, трансляция отключена
Трансляция главного экрана
Отправитель, подключение Cast
Трансляция главного экрана
Отправитель, трансляция подключена
Загрузка приложения веб-приемника
Отправитель, трансляция подключена
Приложение веб-приемника загружено или простаивает
iOS
Отправитель, трансляция недоступна
Трансляция главного экрана
Отправитель, трансляция отключена
Трансляция главного экрана
Отправитель, подключение Cast
Трансляция главного экрана
Отправитель, трансляция подключена
Загрузка приложения веб-приемника
Отправитель, трансляция подключена
Приложение веб-приемника загружено или простаивает
Хром
Отправитель, трансляция недоступна
Значок Cast отображается в Chrome, обеспечивая доступ к расширению Cast независимо от состояния подключения.
Трансляция главного экрана
Отправитель, трансляция отключена
Трансляция главного экрана
Отправитель, подключение Cast
Трансляция главного экрана
Отправитель, трансляция подключена
Загрузка приложения веб-приемника
Отправитель, трансляция подключена
Приложение веб-приемника загружено или простаивает
Изображения, использованные в этом руководстве по дизайну, любезно предоставлены Blender Foundation и защищены авторским правом или лицензией Creative Commons.
- Мечта слона: (c) авторские права 2006 г., Blender Foundation/Нидерландский институт медиаискусства/www.elephantsdream.org
- Синтел: (c) авторские права Blender Foundation | www.sintel.org
- Слезы стали: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) авторские права 2008, Blender Foundation / www.bigbuckbunny.org
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons "С указанием авторства 4.0", а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2025-07-24 UTC.
[[["Прост для понимания","easyToUnderstand","thumb-up"],["Помог мне решить мою проблему","solvedMyProblem","thumb-up"],["Другое","otherUp","thumb-up"]],[["Отсутствует нужная мне информация","missingTheInformationINeed","thumb-down"],["Слишком сложен/слишком много шагов","tooComplicatedTooManySteps","thumb-down"],["Устарел","outOfDate","thumb-down"],["Проблема с переводом текста","translationIssue","thumb-down"],["Проблемы образцов/кода","samplesCodeIssue","thumb-down"],["Другое","otherDown","thumb-down"]],["Последнее обновление: 2025-07-24 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"]]
