Google Cast 平台的用户体验
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
借助 Google Cast,Android、iOS 和 Chrome Web 应用可以将内容(如视频、音频和屏幕共享(镜像))“流式传输”到支持 Cast 的设备,例如:
- Google Chromecast
- 支持 Google Cast 的电视
- 支持 Google Cast 的音箱
- 智能显示屏(用作瘦客户端的便携式触摸屏 LCD 显示器)
- Android 平板电脑
在 Google Cast 互动模型中,手机、平板电脑或笔记本电脑是发送器,可用作遥控器来控制播放;电视、显示屏或已靠墙的平板电脑是接收器,用于接收发送器的指令,并显示接收器通过互联网连接的内容。所有用户操作(点按和滑动)都可以在发送器设备或 Web 接收器上执行。
投放依赖于两个或更多屏幕之间的协调;发送方界面和接收方界面必须协同工作。例如,如果您按移动设备上的按钮暂停内容,电视应指示内容已暂停,而移动设备应提供用于继续播放的播放按钮。
注意事项
由于硬件和资源限制,我们对支持 Google Cast 的应用施加了某些限制:
- Cast 设备是内存、CPU 和 GPU 都受限的低功耗设备,因此 Web 接收器应用应尽可能轻量。
- 对于 Cast 和 Google Cast 互动模型,您可以在 Web 接收器或发送器应用中创建标签页、窗口或弹出式窗口,以及直接接受用户输入(例如点按或滑动)。例如,装载在已固定的平板电脑或显示屏上的 Web Receiver 应用可以显示暂停按钮并接收用户的点按。这样一来,应用上的所有操作都必须从 Web 接收器或发件人应用触发。
- 智能显示屏支持用户通过发送者应用或轻触界面上来输入。
- Web Receiver 是一款针对视频播放进行了优化的 Chrome 浏览器。因此,WebGL 和 Chrome Native Client (NaCL) 目前不受支持,Chrome 扩展程序也不受支持。
- Cast 支持在
<audio>
和 <video>
标记中同时播放单个媒体流,或者使用 WebAudio API 支持多个音轨。在任何时候,DOM 中只能有一个视频元素处于活动状态。此外,不支持视频合成、操控、转换、旋转或缩放。
整体设计原则
在开发界面时,请注意以下事项。
Web 接收器界面:
- Web 接收器可以同时包含互动元素和信息元素,用于描述应用的状态(例如暂停或播放)或错误消息。用户互动可以通过 Cast 发送器(手机、平板电脑或 Chrome 浏览器)或网络接收器(电视、显示器或平板电脑)进行。
- 请注意,视频操作会在电视屏幕中间进行,因此您的界面元素不应干扰呈现效果。将界面元素放置在 Web 接收器显示屏的下三分之一内,并与屏幕边缘留出 10% 的边距,以应对可能出现的过扫。
- 从一种屏幕状态转换到另一种屏幕状态时,应尽可能流畅且具有电影般的感觉。请使用淡入和淡出等过渡,而不是突然在不同状态之间切换。例如,内容加载状态会在屏幕上停留,并淡入媒体播放体验。
发件人接口:
- 发送器支持用户操作,而 Web 接收器会显示状态信息。
例如,如果内容处于暂停状态,电视应指明内容处于暂停状态,而移动设备应指明内容已准备好开始播放(例如,向用户显示播放按钮)。
- 速度至关重要。用户需要能够快速找到投射控件,并看到内容立即在大屏幕上开始播放。加载内容时,提供动画加载指示器,并使用转换效果,让用户感觉到内容加载速度更快。
若要确保您的 Cast 应用遵循这些原则,最简单的方法是使用 Cast 设计核对清单检查界面,并测试 Cast 应用。
品牌推广指南
以下 Google Cast 品牌推广指南面向应用开发者,重点关注您必须遵守哪些附加要求,才能用文字描述您的应用。如需查看 Cast 设备品牌推广指南,请访问合作伙伴营销中心。
您可以使用“支持 Google Cast”一词告知他人您的应用支持 Google Cast。不过,请确保您的应用符合 Cast SDK 附加开发者服务条款和设计核对清单,并且您在使用“支持 Google Cast”时遵守了我们的品牌推广指南。
同样,只要您的应用或设备符合我们的徽章指南,您也可以使用 Google Cast 徽章。如果徽章不符合品牌推广指南,Google 有权要求您修改或停止使用该徽章。
文本中的“Google Cast”
- 在描述应用(而非硬件产品)支持 Cast 时,请使用“支持 Google Cast”字样。例如:“此应用支持 Google Cast”。
- 在描述与 Cast 兼容的第三方硬件产品时,请使用“这台{电视}支持 Google Cast”“这些{音箱}支持 Google Cast”。
- 在文字中,应将“Google”和“Cast”用大写形式显示。
- 在任何使用文字或徽章/徽标形式的“Google Cast”的营销资源中,您都必须添加以下法律归属信息:Google Cast 是 Google LLC 的商标。
- 请勿在应用名称中添加“Google Cast”(例如 XYZ Google Cast 应用)。
支持 Google Cast 的应用消息功能
您可以按以下方式宣传应用:
- “XYZ 是一款支持 Google Cast 的应用,可让您将喜爱的娱乐内容从移动设备流式传输到电视上。”
- “XYZ 应用现在适用于支持 Google Cast 的电视。”
- “XYZ 应用现已适用于所有 Google Cast 产品,包括 Google Chromecast、Google Cast Audio,以及支持 Google Cast 的电视和音箱。”
- “XYZ 应用支持 Google Cast,可让您在支持 Google Cast 的电视上欣赏所有喜爱的节目/电影/音乐/游戏。”
- “XYZ 应用现在支持 Google Cast,可让用户将内容从手机流式传输到支持 Google Cast 的电视上。”
Google Cast 徽章
您可以在自己的网站、应用商店商品详情、营销材料和宣传材料中使用“Google Cast”徽章,以显示您的应用与使用 Cast 协议的设备兼容。
- 请勿修改徽章图片的颜色、比例、间距或任何其他方面。
- 与其他组成技术(例如蓝牙、Spotify Connect、AirPlay 等)的徽标一起使用时,Google Cast 徽章的尺寸不得小于其他徽标。
- 请勿将徽章作为网页上的主要元素。
- 请在徽章与网页上的其他徽标和图标之间留出一定的距离。
- 如果是白色、浅色或中等色调背景,请使用黑色徽章。
- 在黑色或深色背景上使用时,请使用白色徽章。
- 请勿在包含或显示成人内容、宣传赌博、宣传暴力、包含仇恨言论、涉及向未满 21 周岁的人售卖烟草或酒精饮料、违反其他适用法律法规或以其他方式令人反感的网页上使用此徽章。
徽章关联
在线使用时,Google Cast 徽章必须链接到以下任一内容:
- 如需查看 Google 支持 Google Cast 的应用和产品的列表,请访问 g.co/castapps。
- 您发布的商品的列表。
- 您发布的特定商品详情页面。
- 您发布的应用的列表。
- 您在 Google Play 或 Apple App Store 中发布的特定应用详情页面。
下载 Google Cast 徽章素材资源
下载文件包包含便携式网络图形 (.png)、Adobe Illustrator (.ai) 和封装的 Postscript (.eps) 格式。
预览 Google Cast 徽章
如需了解所有可用徽章和使用说明,请参阅合作伙伴中心徽章指南页面。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-25。
[null,null,["最后更新时间 (UTC):2025-07-25。"],[[["\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."]]