زر البث
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
يفتح زر "الإرسال" مربّع حوار للاتصال بأجهزة استقبال الويب والتحكّم فيها وقطع الاتصال بها.
اطّلِع على رموز البث لتنزيل نماذج زر البث.
يُرجى العِلم أنّ زر Cast ليس خاصًا بـ Google Cast، بل يمكن استخدامه لتمثيل كل من أجهزة الاستقبال على الويب وغير التابعة للويب (مثل سمّاعات الرأس التي تتضمّن بلوتوث). يجب أن تظهر أجهزة استقبال الويب دائمًا ضمن مربع حوار البث، وليس ضمن أي مربع حوار أو قائمة أو عنصر تحكّم آخر.
يساعد زر Cast المستخدمين الحاليين على معرفة أنّ تطبيق المرسِل يتيح الآن ميزة "البث"، كما يساعد المستخدمين الجدد في التعرّف على Google Cast.
مطلوب
أ عرض شاشة مقدّمة عن Cast في المرة الأولى التي تتوفّر فيها
أجهزة استقبال الويب بالنسبة إلى أجهزة iOS التي ترسل المحتوى، اعرض شاشة مقدّمة عن البث
في المرة الأولى التي يظهر فيها زر "البث".
B يمكنك تمييز زر "الإرسال" بصريًا من خلال وضع دائرة حول الزر)
C اشرح طريقة عمل زر "الإرسال" (على سبيل المثال،
عرض رسالة مثل "انقر لإرسال الفيديوهات إلى التلفزيون")
Android
مقدمة عن ميزة "البث"
بثّ الشاشة الرئيسية
iOS
مقدمة عن ميزة "البث"
بثّ الشاشة الرئيسية
Chrome
مقدمة عن ميزة "البث"
بثّ الشاشة الرئيسية
إلزامي
أ يجب أن يظهر زر الإرسال
على كل شاشة يتوفّر فيها محتوى قابل للتشغيل، وأن يكون موضع الزر ثابتًا
أثناء تصفّح المحتوى أو تشغيله. سيظهر أيضًا في عنوان Chrome للتحكّم العام.
B في Chrome، يمكن إخفاء زر "البث"
عندما لا تتوفّر "أجهزة استقبال الويب". بالنسبة إلى أجهزة Android وiOS، يجب أن يظهر زر "البث" دائمًا عندما يكون الجهاز متصلاً بشبكة Wi-Fi، وذلك لتقديم المساعدة المناسبة إذا أوقف المستخدم إذن الوصول إلى الشبكة المحلية وأصبحت الأجهزة غير قابلة للاكتشاف نتيجةً لذلك (راجِع أذونات iOS واكتشاف الأجهزة لمزيد من التفاصيل).
C في تطبيقات الأجهزة الجوّالة، يجب أن يظهر زر Cast على الجانب الأيسر.
D في Chrome، يجب أن يظهر زر "الإرسال" على الجانب الأيسر في
عناصر التحكّم في وسائط المحتوى (على سبيل المثال، راجِع الفيديو المضمّن). إذا كانت عناصر التحكّم في الوسائط تتضمّن زر ملء الشاشة، ضَع زر "البث" على يساره.
ملاحظة
تستخدم تكنولوجيا Google Cast نموذجًا لتنفيذ مهام متعددة، ما يتيح للمستخدمين تصفُّح تطبيق الإرسال والتطبيقات الأخرى أثناء البث. يجب أن يكون زر "البث" مرئيًا من كل شاشة يتوفّر فيها محتوى قابل للتشغيل، حتى لا يضطر المستخدم إلى البحث عن مكان إيقاف المحتوى مؤقتًا أو إيقاف تشغيله على التلفزيون.
Android
تم فصل جهاز المُرسِل
بثّ الشاشة الرئيسية
iOS
تم فصل جهاز المُرسِل
بثّ الشاشة الرئيسية
Chrome
تم فصل جهاز المُرسِل
بثّ الشاشة الرئيسية
مطلوب
أ غير متصل: عندما تكون "أدوات استقبال الويب" متاحة،
يظهر زر "البث"
ب جارٍ الاتصال: عندما تكون "أداة استقبال الويب" بصدد الاتصال،
يحرك زر "البث" الموجات في الرمز بشكل تدريجي (للحصول على التفاصيل، يُرجى الاطّلاع على الملاحظة أدناه)
ج متصل: عندما يكون هذا التطبيق متصلاً
بـ "أداة استقبال الويب"، يظهر زر "البث" الخاص به مع شكل إطار مملوء
أفضل الممارسات
بالنسبة إلى كل حالة من حالات الزر، استخدِم ألوانًا تتطابق مع نمط عناصر واجهة المستخدم الأخرى في تطبيقك. استخدام لون تمييز مختلف (مثل الأصفر) للحالة "مفعّل" أو "متصل" هو أمر اختياري.
ملاحظات
- يظهر رمز الإرسال على Chrome وAndroid وiOS لتوفير إمكانية الوصول إلى إضافة Cast بغض النظر عن توفّر أجهزة Cast.
- تظهر حالة "جارٍ الاتصال" (متحركة) عندما يستغرق الاتصال بواجهة برمجة تطبيقات Cast وقتًا أطول من المتوقّع (ستحرّك حِزم تطوير البرامج لنظام التشغيل Android وChrome رمز Cast تلقائيًا). بعد الاتصال، يتم تشغيل تطبيق Web Receiver.
- تم تعديل حالة "مفعَّل" / "متصل" لرمز Cast، وأصبحت تستخدم الآن تعبئة بلون ثابت داخل إطار الرمز. يمكنك الاطّلاع على رمز البث الجديد ونماذج الرموز
هنا.
Android
تم قطع الاتصال بجهاز البثّ
بثّ الشاشة الرئيسية
المُرسِل، جارٍ الاتصال بجهاز البثّ
بثّ الشاشة الرئيسية
جهاز الإرسال، تم ربط البثّ
جارٍ تحميل تطبيق Web Receiver
جهاز الإرسال، تم ربط البثّ
تم تحميل تطبيق Web Receiver / في وضع الخمول
iOS
المُرسِل، ميزة Cast غير متاحة
بثّ الشاشة الرئيسية
تم قطع الاتصال بجهاز البثّ
بثّ الشاشة الرئيسية
المُرسِل، جارٍ الاتصال بجهاز البثّ
بثّ الشاشة الرئيسية
جهاز الإرسال، تم ربط البثّ
جارٍ تحميل تطبيق Web Receiver
جهاز الإرسال، تم ربط البثّ
تم تحميل تطبيق Web Receiver / في وضع الخمول
Chrome
المُرسِل، ميزة Cast غير متاحة
يظهر رمز الإرسال في Chrome لتوفير إمكانية الوصول إلى إضافة Cast
بغض النظر عن حالة الاتصال.
بثّ الشاشة الرئيسية
تم قطع الاتصال بجهاز البثّ
بثّ الشاشة الرئيسية
المُرسِل، جارٍ الاتصال بجهاز البثّ
بثّ الشاشة الرئيسية
جهاز الإرسال، تم ربط البثّ
جارٍ تحميل تطبيق Web Receiver
جهاز الإرسال، تم ربط البثّ
تم تحميل تطبيق Web Receiver / في وضع الخمول
الصور المستخدَمة في دليل التصميم هذا
مقدمة من مؤسسة Blender Foundation، وهي تتم مشاركتها بموجب حقوق الطبع والنشر أو رخصة المشاع الإبداعي.
- Elephant's Dream: (c) حقوق الطبع والنشر 2006، مؤسسة Blender / معهد هولندا للفنون الإعلامية /
www.elephantsdream.org
- Sintel: (c) حقوق الطبع والنشر لمؤسسة 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
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2025-07-26 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-07-26 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\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"]]
