ปุ่ม "แคสต์"
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ปุ่มแคสต์จะเปิดกล่องโต้ตอบเพื่อเชื่อมต่อ ควบคุม และยกเลิกการเชื่อมต่อจากตัวรับเว็บ
ดูไอคอนแคสต์เพื่อดาวน์โหลดเทมเพลตปุ่มแคสต์
โปรดทราบว่าปุ่มแคสต์ไม่ได้มีไว้สำหรับ Google Cast โดยเฉพาะ แต่สามารถใช้เพื่อแสดงทั้งตัวรับสัญญาณบนเว็บและตัวรับสัญญาณที่ไม่ใช่บนเว็บ (เช่น ชุดหูฟังบลูทูธ) ตัวรับสัญญาณเว็บควรปรากฏในกล่องโต้ตอบ Cast เสมอ และไม่ควรปรากฏในกล่องโต้ตอบ เมนู หรือการควบคุมอื่นๆ
การเปิดตัวปุ่มแคสต์ช่วยให้ผู้ใช้เดิมทราบว่าแอปที่ส่งรองรับการแคสต์แล้วในตอนนี้
และยังช่วยผู้ใช้ที่เพิ่งเริ่มใช้ Google Cast อีกด้วย
ต้องระบุ
ก แสดงหน้าจอแนะนำการแคสต์เป็นครั้งแรก
เมื่อตัวรับเว็บพร้อมใช้งาน สำหรับผู้ส่งข้อมูล iOS ให้แสดงหน้าจอแนะนำ Cast
ในครั้งแรกที่ปุ่ม Cast ปรากฏขึ้น
B ไฮไลต์ปุ่มแคสต์ด้วยการวงกลมปุ่ม
C อธิบายวิธีการทำงานของปุ่มแคสต์ (เช่น
แสดงข้อความอย่าง "แตะเพื่อแคสต์วิดีโอไปยังทีวี")
Android
ข้อมูลเบื้องต้นเกี่ยวกับ Cast
แคสต์หน้าจอหลัก
iOS
ข้อมูลเบื้องต้นเกี่ยวกับ Cast
แคสต์หน้าจอหลัก
Chrome
ข้อมูลเบื้องต้นเกี่ยวกับ Cast
แคสต์หน้าจอหลัก
ต้องระบุ
ก ปุ่มแคสต์ต้อง
มองเห็นได้จากทุกหน้าจอที่มีเนื้อหาที่เล่นได้ และอยู่ในตำแหน่งที่สอดคล้องกัน
ขณะเรียกดูหรือเล่นเนื้อหา และจะปรากฏในส่วนหัวของ Chrome สำหรับการควบคุมทั่วโลกด้วย
B ใน Chrome คุณสามารถซ่อนปุ่มแคสต์ได้
เมื่อตัวรับสัญญาณบนเว็บไม่พร้อมใช้งาน สำหรับผู้ส่ง Android และ iOS
ปุ่มแคสต์ควรแสดงเสมอเมื่ออุปกรณ์เปิด Wi-Fi เพื่อให้ความช่วยเหลือที่เหมาะสมได้
หากผู้ใช้ปิดการเข้าถึงเครือข่าย LAN และอุปกรณ์ไม่สามารถค้นพบได้
(ดูรายละเอียดเพิ่มเติมได้ที่สิทธิ์และการค้นพบใน iOS
)
ค ในแอปบนอุปกรณ์เคลื่อนที่ ปุ่มแคสต์ควรอยู่ทางด้านขวา
ง ใน Chrome ปุ่ม "แคสต์" ควรอยู่ทางด้านขวาใน
ตัวควบคุมสื่อของเนื้อหา (เช่น ดูวิดีโอที่ฝัง) หากตัวควบคุมสื่อมีปุ่มเต็มหน้าจอ
ให้วางปุ่มแคสต์ไว้ทางด้านซ้ายของปุ่มนั้น
หมายเหตุ
Google Cast ใช้รูปแบบการทำงานแบบมัลติทาสก์ ซึ่งช่วยให้ผู้ใช้สามารถเรียกดูแอปที่ส่งและแอปอื่นๆ ขณะแคสต์ได้
ปุ่มแคสต์ต้องปรากฏในทุกหน้าจอที่มีเนื้อหาที่เล่นได้ เพื่อให้ผู้ใช้ไม่ต้องค้นหาตำแหน่งที่จะหยุดชั่วคราวหรือหยุดเนื้อหาที่เล่นบนทีวี
Android
ผู้ส่งยกเลิกการเชื่อมต่อ
แคสต์หน้าจอหลัก
iOS
ผู้ส่งยกเลิกการเชื่อมต่อ
แคสต์หน้าจอหลัก
Chrome
ผู้ส่งยกเลิกการเชื่อมต่อ
แคสต์หน้าจอหลัก
ต้องระบุ
A ไม่ได้เชื่อมต่อ: เมื่อมี Web Receiver ให้ใช้งาน ปุ่มแคสต์จะปรากฏขึ้น
B กำลังเชื่อมต่อ: เมื่อ Web Receiver กำลังเชื่อมต่อ ปุ่มแคสต์จะเคลื่อนไหวคลื่นในไอคอนอย่างต่อเนื่อง (ดูรายละเอียดได้ที่หมายเหตุด้านล่าง)
C เชื่อมต่อแล้ว: เมื่อแอปนี้เชื่อมต่อกับ Cast
Web Receiver แล้ว ปุ่มแคสต์จะปรากฏขึ้นพร้อมกับรูปทรงกรอบที่เติมสี
แนวทางปฏิบัติแนะนำ
สำหรับสถานะปุ่มแต่ละสถานะ ให้ใช้สีที่ตรงกับสไตล์ขององค์ประกอบ UI อื่นๆ
ของแอป การใช้สีไฮไลต์ที่แตกต่าง (เช่น สีเหลือง) สำหรับสถานะเปิด / เชื่อมต่อ
เป็นตัวเลือก
หมายเหตุ
- ไอคอนแคสต์จะแสดงใน Chrome, Android และ iOS เพื่อให้สิทธิ์เข้าถึงส่วนขยาย Cast
ไม่ว่าอุปกรณ์ Cast จะพร้อมใช้งานหรือไม่ก็ตาม
- สถานะกำลังเชื่อมต่อ (ภาพเคลื่อนไหว) จะปรากฏขึ้นเมื่อการเชื่อมต่อกับ Cast API ใช้เวลานานกว่า
ที่คาดไว้ (SDK ของ Android และ Chrome จะสร้างภาพเคลื่อนไหวให้กับไอคอน Cast โดยอัตโนมัติ) เมื่อเชื่อมต่อแล้ว
แอป Web Receiver จะเปิดขึ้น
- สถานะเปิด / เชื่อมต่อของไอคอน Cast ได้รับการอัปเดตแล้ว และตอนนี้ใช้การเติมสีทึบภายในกรอบไอคอน
ไอคอน Cast ใหม่และเทมเพลตไอคอนพร้อมใช้งานแล้ว
ที่นี่
Android
ผู้ส่ง ยกเลิกการเชื่อมต่อ Cast แล้ว
แคสต์หน้าจอหลัก
ผู้ส่ง กำลังเชื่อมต่อเพื่อแคสต์
แคสต์หน้าจอหลัก
ผู้ส่ง เชื่อมต่อเพื่อแคสต์แล้ว
กำลังโหลดแอปตัวรับสัญญาณบนเว็บ
ผู้ส่ง เชื่อมต่อเพื่อแคสต์แล้ว
แอปตัวรับสัญญาณบนเว็บโหลดแล้ว / ไม่ได้ใช้งาน
iOS
ผู้ส่ง, Cast ไม่พร้อมใช้งาน
แคสต์หน้าจอหลัก
ผู้ส่ง ยกเลิกการเชื่อมต่อ Cast แล้ว
แคสต์หน้าจอหลัก
ผู้ส่ง กำลังเชื่อมต่อเพื่อแคสต์
แคสต์หน้าจอหลัก
ผู้ส่ง เชื่อมต่อเพื่อแคสต์แล้ว
กำลังโหลดแอปตัวรับสัญญาณบนเว็บ
ผู้ส่ง เชื่อมต่อเพื่อแคสต์แล้ว
แอปตัวรับสัญญาณบนเว็บโหลดแล้ว / ไม่ได้ใช้งาน
Chrome
ผู้ส่ง, Cast ไม่พร้อมใช้งาน
ไอคอนแคสต์จะแสดงใน Chrome เพื่อให้เข้าถึงส่วนขยายแคสต์ได้
ไม่ว่าสถานะการเชื่อมต่อจะเป็นอย่างไรก็ตาม
แคสต์หน้าจอหลัก
ผู้ส่ง ยกเลิกการเชื่อมต่อ Cast แล้ว
แคสต์หน้าจอหลัก
ผู้ส่ง กำลังเชื่อมต่อเพื่อแคสต์
แคสต์หน้าจอหลัก
ผู้ส่ง เชื่อมต่อเพื่อแคสต์แล้ว
กำลังโหลดแอปตัวรับสัญญาณบนเว็บ
ผู้ส่ง เชื่อมต่อเพื่อแคสต์แล้ว
แอปตัวรับสัญญาณบนเว็บโหลดแล้ว / ไม่ได้ใช้งาน
รูปภาพที่ใช้ในคำแนะนำการออกแบบนี้
ได้รับความอนุเคราะห์จาก Blender Foundation และแชร์ภายใต้ลิขสิทธิ์หรือสัญญาอนุญาตครีเอทีฟคอมมอนส์
- 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
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-26 UTC
[null,null,["อัปเดตล่าสุด 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"]]
