ในฐานะผู้เผยแพร่วิดีโอ คุณอาจต้องการป้องกันไม่ให้ผู้ชม ข้ามโฆษณาตอนกลาง เมื่อผู้ใช้เลื่อนแถบเลื่อนเลยช่วงพักโฆษณา คุณสามารถนำผู้ใช้กลับไปยังจุดเริ่มต้นของช่วงพักโฆษณานั้น จากนั้นนำผู้ใช้กลับไปยังตำแหน่งเดิมหลังจากช่วงพักโฆษณาสิ้นสุดลง ฟีเจอร์นี้ เรียกว่า "ย้อนกลับ"
ดูตัวอย่างได้ที่แผนภาพด้านล่าง ผู้ชมกำลังดูวิดีโอ และตัดสินใจที่จะกรอจากช่วง 5 นาทีไปที่ช่วง 15 นาที อย่างไรก็ตาม มีช่วงพักโฆษณาที่เครื่องหมาย 10 นาทีที่คุณต้องการให้ผู้ชมดู ก่อนที่จะดูเนื้อหาหลังจากนั้นได้
หากต้องการแสดงช่วงพักโฆษณานี้ ให้ทำตามขั้นตอนต่อไปนี้
- ตรวจสอบว่าผู้ใช้เลื่อนแถบเลื่อนข้ามช่วงพักโฆษณาที่ยังไม่ได้ดูหรือไม่ หากใช่ ให้นำผู้ใช้กลับไปยังช่วงพักโฆษณานั้น
- หลังจากช่วงพักโฆษณาสิ้นสุดลง ให้นำผู้ใช้กลับไปยังตำแหน่งเดิมที่ผู้ใช้เลื่อนแถบเลื่อน
ในรูปแบบแผนภาพ จะมีลักษณะดังนี้
วิธีใช้การย้อนกลับโดยใช้ IMA DAI SDK มีดังนี้ ตามที่แสดงในตัวอย่างขั้นสูง
ป้องกันไม่ให้ผู้ใช้ข้ามช่วงพักโฆษณาโดยไม่ได้ดู
ตรวจสอบว่าผู้ใช้ได้กรอวิดีโอผ่านช่วงพักโฆษณาที่ยังไม่ได้ดูหรือไม่
หากใช่ ให้นำผู้ใช้กลับไปยังช่วงพักโฆษณาดังกล่าว
ใน SDK ของ HTML5 ให้ตั้งค่า Listener เหตุการณ์ในเหตุการณ์ seeked
ของเพลเยอร์เนื้อหา
เพื่อทริกเกอร์ onSeekEnd()
วิธีการดังกล่าว (แสดงด้านล่าง) จะตรวจสอบ Cue Point
ก่อนเวลาที่ผู้ใช้ขอให้เล่น หากยังไม่ได้เล่น ให้ข้ามไปยังจุดเริ่มต้นของช่วงพักโฆษณานั้นแทนจุดข้ามที่ต้องการในตอนแรก และบันทึกจุดข้ามที่ต้องการนั้นใน snapForwardTime
function onSeekEnd() {
if (isLiveStream) { return; }
if (isSnapback) {
isSnapback = false;
return;
}
var currentTime = videoElement.currentTime;
var previousCuePoint =
streamManager.previousCuePointForStreamTime(currentTime);
if (previousCuePoint && !previousCuePoint.played) {
isSnapback = true;
snapForwardTime = currentTime;
videoElement.currentTime = previousCuePoint.start;
}
นำผู้ใช้กลับไปยังตำแหน่งเดิมที่เลื่อนหา
ตอนนี้เมื่อคุณได้รับเหตุการณ์ AD_BREAK_ENDED
ให้ตรวจสอบว่ามีการตั้งค่า snapForwardTime
หรือไม่ หากเป็นเช่นนั้น ให้นำผู้ใช้ไปยังจุดนั้นในสตรีม เนื่องจากโฆษณา
คั่นที่ผู้ใช้เพิ่งดูเป็นผลมาจากการย้อนกลับ
function onAdBreakEnded(e) {
videoElement.controls = true;
clickElement.style.display = 'none';
adUiDiv.style.display = 'none';
if (snapForwardTime && snapForwardTime > videoElement.currentTime) {
videoElement.currentTime = snapForwardTime;
snapForwardTime = null;
}
}