ปุ่ม "แคสต์" จะเปิดกล่องโต้ตอบเพื่อเชื่อมต่อ ควบคุม และยกเลิกการเชื่อมต่อกับเว็บรีซีฟเวอร์
ดูไอคอนแคสต์เพื่อดาวน์โหลดเทมเพลตปุ่ม "แคสต์"
โปรดทราบว่าปุ่ม "แคสต์" ไม่ได้มีไว้สำหรับ Google Cast โดยเฉพาะ แต่ใช้เพื่อแสดงทั้งตัวรับสัญญาณที่เป็นเว็บและไม่ใช่เว็บได้ (เช่น ชุดหูฟังบลูทูธ) เว็บรีซีฟเวอร์ควรปรากฏใต้กล่องโต้ตอบ "แคสต์" ทุกครั้ง และไม่แสดงใต้กล่องโต้ตอบ เมนู หรือตัวควบคุมอื่น
แนะนำ Cast ให้กับผู้ใช้
การเปิดตัวปุ่ม "แคสต์" ช่วยให้ผู้ใช้ปัจจุบันทราบว่าแอปของผู้ส่งรองรับการแคสต์แล้ว และยังช่วยให้ผู้ใช้ที่เพิ่งเคยใช้ Google Cast อีกด้วย
จำเป็น
A แสดงหน้าจอแนะนำการแคสต์ในครั้งแรกที่
เว็บรีซีฟเวอร์พร้อมใช้งาน สำหรับผู้ส่ง iOS ให้แสดงหน้าจอแนะนำ Cast
เมื่อปุ่ม "แคสต์" ปรากฏขึ้นเป็นครั้งแรก
B ไฮไลต์ปุ่ม "แคสต์" ให้เห็นภาพด้วยวงกลมรอบปุ่ม)
C อธิบายวิธีการทำงานของปุ่ม "แคสต์" (เช่น แสดงข้อความ เช่น "แตะเพื่อแคสต์วิดีโอไปยังทีวี")
Android
ข้อมูลเบื้องต้นเกี่ยวกับการแคสต์
![ข้อมูลเบื้องต้นเกี่ยวกับการแคสต์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/prompting1_a.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
iOS
ข้อมูลเบื้องต้นเกี่ยวกับการแคสต์
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/prompting1_a.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
Chrome
ข้อมูลเบื้องต้นเกี่ยวกับการแคสต์
![ข้อมูลเบื้องต้นเกี่ยวกับการแคสต์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/prompting1_a.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![แคสต์หน้าจอหลัก](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
ความพร้อมใช้งานของปุ่ม "แคสต์"
จำเป็น
ก ปุ่ม "แคสต์" ต้อง
มองเห็นได้จากทุกหน้าจอที่มีเนื้อหาที่เล่นได้ และอยู่ในตำแหน่งที่สอดคล้องกัน
ขณะเรียกดูหรือเล่นเนื้อหา นอกจากนี้ยังปรากฏในส่วนหัวของ Chrome สำหรับการควบคุมส่วนกลางด้วย
B ใน Chrome คุณจะซ่อนปุ่ม "แคสต์" ได้
เมื่อเว็บรีซีฟเวอร์ไม่พร้อมใช้งาน สำหรับผู้ส่ง Android และ iOS ปุ่ม "แคสต์" ควรจะแสดงเสมอเมื่ออุปกรณ์เปิด Wi-Fi อยู่ ผู้ใช้จึงจะได้รับความช่วยเหลือที่เหมาะสมในกรณีที่ผู้ใช้ปิดการเข้าถึงเครือข่ายภายในอยู่และทำให้ผู้ใช้ค้นพบอุปกรณ์ไม่ได้ (ดูรายละเอียดเพิ่มเติมได้ที่สิทธิ์และการค้นพบของ iOS)
C ปุ่ม "แคสต์" ควรอยู่ทางด้านขวาในแอปบนอุปกรณ์เคลื่อนที่
D ใน Chrome ปุ่ม "แคสต์" ควรอยู่ด้านขวาในตัวควบคุมสื่อเนื้อหา (เช่น ดูวิดีโอแบบฝัง) หากตัวควบคุมสื่อมีปุ่มเต็มหน้าจอ ให้วางปุ่ม "แคสต์" ที่ด้านซ้ายของปุ่ม
หมายเหตุ
Google Cast ใช้โมเดลการทำงานหลายอย่างพร้อมกัน ซึ่งช่วยให้ผู้ใช้เรียกดูแอปของผู้ส่งและแอปอื่นๆ ได้ในขณะที่แคสต์ ปุ่ม "แคสต์" ต้องมองเห็นได้จากทุกหน้าจอซึ่งมีเนื้อหาที่เล่นได้ ผู้ใช้จึงไม่ต้องตามหาเพื่อหาตำแหน่งที่ควรหยุดเนื้อหาชั่วคราวหรือหยุดเล่นบนทีวี
Android
ยกเลิกการเชื่อมต่อกับผู้ส่งแล้ว
![ยกเลิกการเชื่อมต่อกับผู้ส่งแล้ว](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
iOS
ยกเลิกการเชื่อมต่อกับผู้ส่งแล้ว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-available1_a.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
Chrome
ยกเลิกการเชื่อมต่อกับผู้ส่งแล้ว
![ยกเลิกการเชื่อมต่อกับผู้ส่งแล้ว](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-available1_a.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
สถานะของปุ่ม "แคสต์"
จำเป็น
A ยกเลิกการเชื่อมต่อ: เมื่อเว็บรีซีฟเวอร์พร้อมใช้งาน
ปุ่ม "แคสต์" จะปรากฏขึ้น
B การเชื่อมต่อ: เมื่อเชื่อมต่อเว็บรีซีฟเวอร์
ปุ่ม "แคสต์" จะเคลื่อนไหวคลื่นในไอคอนอย่างต่อเนื่อง (ดูรายละเอียดได้จากหมายเหตุด้านล่าง)
C เชื่อมต่อแล้ว: เมื่อแอปนี้เชื่อมต่อกับ
เว็บรีซีฟเวอร์ ปุ่มแคสต์จะปรากฏขึ้นพร้อมกรอบแคสต์
แนวทางปฏิบัติแนะนำ
สำหรับแต่ละสถานะของปุ่ม ให้ใช้สีที่เข้ากับสไตล์ขององค์ประกอบ UI อื่นๆ ของแอป การใช้สีไฮไลต์ที่แตกต่าง (เช่น สีเหลือง) สำหรับสถานะ "เปิด / เชื่อมต่อ" นั้นไม่บังคับ
Notes
- ไอคอนแคสต์จะแสดงใน Chrome, Android และ iOS เพื่อให้เข้าถึงส่วนขยาย Cast ได้ไม่ว่าอุปกรณ์แคสต์จะพร้อมให้บริการหรือไม่ก็ตาม
- สถานะ "เชื่อมต่อ" (ภาพเคลื่อนไหว) จะปรากฏขึ้นเมื่อการเชื่อมต่อกับ Cast API ใช้เวลานานกว่าที่คาดไว้ (SDK ของ Android และ Chrome จะทำให้ไอคอน Cast เคลื่อนไหวโดยอัตโนมัติ) เมื่อเชื่อมต่อแล้ว แอป Web Receiver จะเปิดขึ้น
- สถานะ "เปิด / เชื่อมต่อ" ของไอคอน "แคสต์" ได้รับการอัปเดตแล้ว และตอนนี้จะใช้การเติมสีทึบภายในกรอบไอคอน ไอคอนแคสต์และเทมเพลตไอคอนใหม่จะพร้อมใช้งาน ที่นี่
Android
ผู้ส่ง ยกเลิกการเชื่อมต่อ Cast แล้ว
![ผู้ส่ง ยกเลิกการเชื่อมต่อ Cast แล้ว](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![แคสต์หน้าจอหลัก](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
ผู้ส่ง กำลังเชื่อมต่อการแคสต์
![ผู้ส่ง กำลังเชื่อมต่อการแคสต์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-2-122023.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![แคสต์หน้าจอหลัก](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
ผู้ส่ง เชื่อมต่อการแคสต์แล้ว
![ผู้ส่ง เชื่อมต่อการแคสต์แล้ว](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=4&hl=th)
กำลังโหลดแอปเว็บรีซีฟเวอร์
![กำลังโหลดแอปเว็บรีซีฟเวอร์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=4&hl=th)
ผู้ส่ง เชื่อมต่อการแคสต์แล้ว
![ผู้ส่ง เชื่อมต่อการแคสต์แล้ว](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=4&hl=th)
โหลดแอปเว็บรีซีฟเวอร์แล้ว / ไม่มีการใช้งาน
![โหลดแอปเว็บรีซีฟเวอร์แล้ว / ไม่มีการใช้งาน](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=4&hl=th)
iOS
ผู้ส่ง แคสต์ไม่พร้อมใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states1_a.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
ผู้ส่ง ยกเลิกการเชื่อมต่อ Cast แล้ว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2_a.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
ผู้ส่ง กำลังเชื่อมต่อการแคสต์
![ผู้ส่ง กำลังเชื่อมต่อการแคสต์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states3_a.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
ผู้ส่ง เชื่อมต่อการแคสต์แล้ว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=4&hl=th)
กำลังโหลดแอปเว็บรีซีฟเวอร์
![กำลังโหลดแอปเว็บรีซีฟเวอร์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=4&hl=th)
ผู้ส่ง เชื่อมต่อการแคสต์แล้ว
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=4&hl=th)
โหลดแอปเว็บรีซีฟเวอร์แล้ว / ไม่มีการใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=4&hl=th)
Chrome
ผู้ส่ง แคสต์ไม่พร้อมใช้งาน
![ผู้ส่ง แคสต์ไม่พร้อมใช้งาน](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states1_a.png?authuser=4&hl=th)
ไอคอน "แคสต์" จะแสดงใน Chrome เพื่อให้เข้าถึงส่วนขยาย Cast ไม่ว่าสถานะการเชื่อมต่อจะเป็นอย่างไร
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
ผู้ส่ง ยกเลิกการเชื่อมต่อ Cast แล้ว
![ผู้ส่ง ยกเลิกการเชื่อมต่อ Cast แล้ว](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2_a.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
ผู้ส่ง กำลังเชื่อมต่อการแคสต์
![ผู้ส่ง กำลังเชื่อมต่อการแคสต์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states3_a.png?authuser=4&hl=th)
แคสต์หน้าจอหลัก
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=4&hl=th)
ผู้ส่ง เชื่อมต่อการแคสต์แล้ว
![ผู้ส่ง เชื่อมต่อการแคสต์แล้ว](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=4&hl=th)
กำลังโหลดแอปเว็บรีซีฟเวอร์
![กำลังโหลดแอปเว็บรีซีฟเวอร์](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=4&hl=th)
ผู้ส่ง เชื่อมต่อการแคสต์แล้ว
![ผู้ส่ง เชื่อมต่อการแคสต์แล้ว](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=4&hl=th)
โหลดแอปเว็บรีซีฟเวอร์แล้ว / ไม่มีการใช้งาน
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=4&hl=th)
รูปภาพที่ใช้ในคู่มือการออกแบบนี้ได้รับความเอื้อเฟื้อจาก Blender Foundation ที่แชร์ภายใต้ลิขสิทธิ์หรือใบอนุญาตครีเอทีฟคอมมอนส์
- Elephant's Dream: (c) ลิขสิทธิ์ 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel: (ค) มูลนิธิ Blender ลิขสิทธิ์ | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org