ภาพรวม
SDK ตัวรับเว็บรองรับคิวด้วยคิวเริ่มต้นที่ SDK ให้ไว้โดยใช้ QueueData
และ QueueManager
หรือใช้คิวที่กําหนดเองโดยการติดตั้งใช้งาน cast.framework.QueueBase
และใช้
QueueManager
Queueing API ช่วยให้แอปพลิเคชันผสานรวมกับ Cast ได้ดียิ่งขึ้นด้วยฟีเจอร์ต่อไปนี้
- รองรับการใช้งานคิวระบบคลาวด์ของ Google และพาร์ทเนอร์ เพื่อให้โหลดคิวที่สร้างขึ้นจากภายนอกและสร้างไว้ในอุปกรณ์แคสต์ได้โดยตรง
- กลไกที่อนุญาตให้ใส่เลขหน้าของรายการในคิวโดยไม่ต้องโหลดทุกอย่างพร้อมกัน
- รองรับการรับส่งข้อความใหม่ เช่น การไปยังรายการถัดไป ก่อนหน้า การดึงข้อมูลหน้าต่างของรายการ ตลอดจนการรับข้อมูลสื่อที่เกี่ยวข้องกับชุดรายการคิว
QueueManager
สําหรับจัดการการแทรก การนําออก และการอัปเดตรายการในคิว
คิวเริ่มต้น
SDK ผู้รับเว็บมีการรองรับคิวแบบจํากัดออกจากกล่องในรูปแบบของคิวเริ่มต้น
หากต้องการใช้คิวเริ่มต้น ให้ระบุ queueData
ใน LoadRequestData
ของการโหลดฝั่งผู้ส่งหรือส่งคําขอโหลดในเครื่องโดยใช้ PlayerManager#load
นอกจากนี้ โปรดดูการโหลดสื่อ
ในฝั่งผู้รับ ให้แก้ไขคิวโดยใช้ QueueManager
เมื่อโหลดสื่อเริ่มต้นแล้ว
คิวที่กําหนดเอง
หากคิวเริ่มต้นไม่มีฟังก์ชันการจัดคิวที่จําเป็นสําหรับแอป ความสามารถในการสร้างคิวที่กําหนดเองจะมีให้ใช้งาน ซึ่งทําให้มีความสามารถและความยืดหยุ่นที่มากขึ้น
นักพัฒนาแอปพลิเคชันสามารถสร้างคิวฝั่งผู้รับเว็บได้โดยใช้ cast.framework.QueueBase
ต่อไปนี้คือตัวอย่างพื้นฐานของคิวง่ายๆ ที่มีการลบล้างการเรียกใช้ initialize
จากนั้นจะแสดงรายการรายการสินค้าในคิวพร้อมกับคําอธิบายคิวไปยังอุปกรณ์แคสต์
นอกจากนี้ โปรดดูการโหลดสื่อ
// Creates a simple queue with a combination of contents.
const DemoQueue = class extends cast.framework.QueueBase {
constructor() {
super();
/**
* List of media urls.
* @private @const {!Array<string>}
*/
this.myMediaUrls_ = [...];
}
/**
* Provide a list of items.
* @param {!cast.framework.messages.LoadRequestData} loadRequestData
* @return {!cast.framework.messages.QueueData}
*/
initialize(loadRequestData) {
const items = [];
for (const mediaUrl of this.myMediaUrls_) {
const item = new cast.framework.messages.QueueItem();
item.media = new cast.framework.messages.MediaInformation();
item.media.contentId = mediaUrl;
items.push(item);
}
let queueData = loadRequestData.queueData;
// Create a new queue with media from the load request if one doesn't exist.
if (!queueData) {
queueData = new cast.framework.messages.QueueData();
queueData.name = 'Your Queue Name';
queueData.description = 'Your Queue Description';
queueData.items = items;
// Start with the first item in the playlist.
queueData.startIndex = 0;
// Start from 10 seconds into the first item.
queueData.currentTime = 10;
}
return queueData;
}
};
ในตัวอย่างนี้ รายชื่อในการโทรของ initialize
จะมีอยู่ในการเรียกเครื่องมือสร้าง QueueBase
ของผู้ให้บริการ อย่างไรก็ตาม สําหรับการติดตั้งใช้งานคิวระบบคลาวด์ ตรรกะ Web Recipient ที่กําหนดเองจะสามารถดึงรายการจากภายนอก จากนั้นจึงส่งคืนมาเป็นส่วนหนึ่งของการเรียกเริ่มต้น
หากต้องการสาธิตการใช้งาน API คิวที่ครอบคลุมมากขึ้น โปรดดูคิวการสาธิตซึ่งติดตั้งใช้งานคลาส QueueBase
ส่วนใหญ่
const DemoQueue = class extends cast.framework.QueueBase {
constructor() {
/** @private {} */
super();
YourServer.onSomeEvent = this.updateEntireQueue_;
}
/**
* Initializes the queue.
* @param {!cast.framework.messages.LoadRequestData} loadRequestData
* @return {!cast.framework.messages.QueueData}
*/
initialize(loadRequestData) {
let queueData = loadRequestData.queueData;
// Create a new queue with media from the load request if one doesn't exist.
if (!queueData) {
queueData = new cast.framework.messages.QueueData();
queueData.name = 'Your Queue Name';
queueData.description = 'Your Queue Description';
// Put the first set of items into the queue
const items = this.nextItems();
queueData.items = items;
// Start with the first item in the playlist.
queueData.startIndex = 0;
// Start from 10 seconds into the first item.
queueData.currentTime = 10;
}
return queueData;
}
/**
* Picks a set of items from remote server after the reference item id and
* return as the next items to be inserted into the queue. When
* referenceItemId is omitted, items are simply appended to the end of the
* queue.
* @param {number} referenceItemId
* @return {!Array<cast.framework.QueueItem>}
*/
nextItems(referenceItemId) {
// Assume your media has a itemId and the media url
return this.constructQueueList_(YourServer.getNextMedias(referenceItemId));
}
/**
* Picks a set of items from remote server before the reference item id and
* return as the items to be inserted into the queue. When
* referenceItemId is omitted, items are simply appended to beginning of the
* queue.
* @param {number} referenceItemId
* @return {!Array<cast.framework.QueueItem>}
*/
prevItems(referenceItemId) {
return this.constructQueueList_(YourServer.getPrevMedias(referenceItemId));
}
/**
* Constructs a list of QueueItems based on the media information containing
* the item id and the media url.
* @param {number} referenceItemId
* @return {!Array<cast.framework.QueueItem>}
*/
constructQueueList_(medias) {
const items = [];
for (media of medias) {
const item = new cast.framework.messages.QueueItem(media.itemId);
item.media = new cast.framework.messages.MediaInformation();
item.media.contentId = media.url;
items.push(item);
}
return items;
}
/**
* Logs the currently playing item.
* @param {number} itemId The unique id for the item.
* @export
*/
onCurrentItemIdChanged(itemId) {
console.log('We are now playing video ' + itemId);
YourServer.trackUsage(itemId);
}
};
ในตัวอย่างข้างต้น YourServer
คือเซิร์ฟเวอร์คิวในระบบคลาวด์และมีตรรกะในการดึงรายการสื่อบางรายการ
หากต้องการใช้คิว QueueBase
- ใช้คิว ตัวเลือกจะตั้งตัวเลือกคิวใน CastReceiverContext
ดังนี้
const context = cast.framework.CastReceiverContext.getInstance();
context.start({queue: new DemoQueue()});
การจัดการคิว
QueueManager
ช่วยให้นักพัฒนาแอปพัฒนาโซลูชันในคิวได้อย่างยืดหยุ่นด้วยการมอบวิธีการเข้าถึงรายการคิวที่จัดเก็บไว้ในในปัจจุบันและไอเทมที่เล่นอยู่ รวมถึงยังมีการดําเนินการต่างๆ เช่น แทรก นําออก
และอัปเดตรายการในคิว ข้อมูลโค้ดต่อไปนี้แสดงวิธีเข้าถึงอินสแตนซ์ของ QueueManager
const context = cast.framework.CastReceiverContext.getInstance();
const queueManager = context.getPlayerManager().getQueueManager();
การจัดการคิวเริ่มต้น
เมื่อโหลดคิวเริ่มต้นแล้ว QueueManager
จะสามารถใช้เพื่อดําเนินการต่างๆ เช่น เรียกดูรายการปัจจุบัน เรียกรายการทั้งหมดในคิว และอัปเดตรายการในคิวโดยใช้ insertItems
, removeItems
และ
updateItems
การจัดการคิวที่กําหนดเอง
นี่คือตัวอย่างการติดตั้งใช้งานคิวที่กําหนดเองที่ใช้วิธีการแทรกและนําออกโดยอิงตามเหตุการณ์ ตัวอย่างยังแสดงให้เห็นการใช้งาน updateItems
ซึ่งนักพัฒนาซอฟต์แวร์จะแก้ไขรายการคิวในคิวที่มีอยู่ได้ เช่น การนําช่วงพักโฆษณาออก
const DemoQueue = class extends cast.framework.QueueBase {
constructor() {
super();
/** @private @const {!cast.framework.QueueManager} */
this.queueManager_ = context.getPlayerManager().getQueueManager();
}
/**
* Provide a list of items.
* @param {!cast.framework.messages.LoadRequestData} loadRequestData
* @return {!cast.framework.messages.QueueData}
*/
initialize(loadRequestData) {
// Your normal initialization; see examples above.
return queueData;
}
/** Inserts items to the queue. */
onSomeEventTriggeringInsertionToQueue() {
const twoMoreUrls = ['http://url1', 'http://url2'];
const items = [];
for (const mediaUrl of twoMoreUrls) {
const item = new cast.framework.QueueItem();
item.media = new cast.framework.messages.MediaInformation();
item.media.contentId = mediaUrl;
items.push(item);
}
// Insert two more items after the current playing item.
const allItems = this.queueManager_.getItems();
const currentItemIndex = this.queueManager_.getCurrentItemIndex();
const nextItemIndex = currentItemIndex + 1;
let insertBefore = undefined;
if (currentItemIndex >= 0 &&
currentItemIndex < allItems.length - 1) {
insertBefore = allItems[nextItemIndex].itemId;
}
this.queueManager_.insertItems(items, insertBefore);
}
/** Removes a particular item from the queue. */
onSomeEventTriggeringRemovalFromQueue() {
this.queueManager_.removeItems([2]);
}
/** Removes all the ads from all the items across the entire queue. */
onUserBoughtAdFreeVersion() {
const items = this.queueManager_.getItems();
this.queueManager_.updateItems(items.map(item => {
item.media.breaks = undefined;
return item;
}));
}
};
ข้อความขาเข้าและขาออก
และเพื่อให้การรองรับการดึงข้อมูลคิวฝั่งผู้รับเป็นแหล่งที่มาของความจริงได้อย่างสมบูรณ์ ในขณะนี้ CAF Receiver SDK จะใช้ข้อความในคิวต่อไปนี้เพิ่มเติมและจัดการโดย SDK ผู้รับ
ข้อความขาเข้า | พารามิเตอร์ | ข้อความตอบกลับขาออก | ส่งคืน |
ถัดไป | ไม่จําเป็นต้องระบุพารามิเตอร์ | สื่อ | ผู้รับจะ (ดึงข้อมูลผ่าน nextItems() หากจําเป็น) และเริ่มเล่นรายการถัดไป |
ก่อนหน้า | ไม่จําเป็นต้องระบุพารามิเตอร์ | สื่อ | ตัวรับสัญญาณเว็บจะ (ดึงข้อมูลผ่าน prevItems() หากจําเป็น) และเริ่มเล่นรายการก่อนหน้า |
ค้นหา | FetchItemsRequestData | ภารกิจ | Cast.framework.messages.QueueChange เช่น สําหรับกรอบการแทรก ช่องรายการใน JSON จะมีรายการใหม่ที่ดึงมา |
รับข้อมูล | GetItemsInfoRequestData ที่มี itemIds: Array<number> | สินค้า | Cast.framework.messages.ItemsInfo พร้อมข้อมูลรายการคิว |
GET_QUEUE_IDS | ไม่จําเป็นต้องระบุพารามิเตอร์ | รหัสคิว | Cast.framework.messages.QueueIds |
สําหรับ NEXT
/PREVIOUS
หากการนําเสนอคิวที่มีอยู่ในอุปกรณ์รับเว็บไม่มีรายการเพิ่มเติม
QueueBase.nextItems()
หรือ
QueueBase.prevItems()
จะถูกเรียกใช้โดยอัตโนมัติเพื่อรับรายการเพิ่มเติม
สําหรับ FETCH_ITEM
ฟังก์ชันที่เกี่ยวข้อง
fetchItems
ในการติดตั้งใช้งาน QueueBase
จะถูกเรียกใช้สําหรับคิวระบบคลาวด์ ซึ่งจะเรียกข้อมูลที่เกี่ยวข้องกลับไปยังตัวรับเว็บเพื่อจัดเก็บ
เมื่อมีการดึงข้อมูลรายการเพิ่มเติม ระบบจะทริกเกอร์ข้อความประเภทใหม่ QUEUE_CHANGE
และส่งกลับไปยังผู้ส่ง ดูการเปลี่ยนแปลงคิวประเภทต่างๆ
สําหรับ GET_ITEMS_INFO
การเรียกใช้ QueueBase
จะไม่ทริกเกอร์และ Web Receiver จะแสดงผลข้อมูลสื่อที่รู้จักกับรายชื่อรหัส
กําลังสุ่มเพลงในคิว
หากต้องการสับเปลี่ยนรายการในคิว ให้ตั้งค่าแฟล็ก
shuffle
ของ
QueueData
เป็น true
เมื่อโหลดรายการลงในคิว
หากใช้งาน QueueBase
ให้ใช้เมธอด shuffle
เพื่อแสดงรายการสินค้าแบบสุ่ม
หากต้องการสับเปลี่ยนคิวที่มีอยู่ ให้ใช้แฟล็ก
shuffle
ของ QUEUE_UPDATE
MessageType
แทนคําสั่ง QUEUE_SHUFFLE
ดูข้อมูลเพิ่มเติมที่QueueUpdateRequestData
โหมดเล่นซ้ํา
หากต้องการกําหนดรายการในคิวซ้ํา ให้ตั้งค่าพร็อพเพอร์ตี้ repeatMode
ของ QueueData
เป็นที่ต้องการ เมื่อโหลดรายการลงในคิว
หากต้องการเปลี่ยน RepeatMode
ของคิวที่มีอยู่ ให้ใช้พร็อพเพอร์ตี้ repeatMode
ของ QueueUpdateRequestData
ซึ่งใช้ QUEUE_UPDATE
MessageType