กลับไปที่ช่วงพักโฆษณาที่ข้าม

เลือกแพลตฟอร์ม: HTML5 Android iOS tvOS Roku

ในฐานะผู้เผยแพร่วิดีโอ คุณอาจต้องการป้องกันไม่ให้ผู้ชม ข้ามโฆษณาตอนกลาง เมื่อผู้ใช้เลื่อนแถบเลื่อนเลยช่วงพักโฆษณา คุณสามารถนำผู้ใช้กลับไปยังจุดเริ่มต้นของช่วงพักโฆษณานั้น จากนั้นนำผู้ใช้กลับไปยังตำแหน่งเดิมหลังจากช่วงพักโฆษณาสิ้นสุดลง ฟีเจอร์นี้ เรียกว่า "ย้อนกลับ"

ดูตัวอย่างได้ที่แผนภาพด้านล่าง ผู้ชมกำลังดูวิดีโอ และตัดสินใจที่จะกรอจากช่วง 5 นาทีไปที่ช่วง 15 นาที อย่างไรก็ตาม มีช่วงพักโฆษณาที่เครื่องหมาย 10 นาทีที่คุณต้องการให้ผู้ชมดู ก่อนที่จะดูเนื้อหาหลังจากนั้นได้

หากต้องการแสดงช่วงพักโฆษณานี้ ให้ทำตามขั้นตอนต่อไปนี้

  1. ตรวจสอบว่าผู้ใช้เลื่อนแถบเลื่อนข้ามช่วงพักโฆษณาที่ยังไม่ได้ดูหรือไม่ หากใช่ ให้นำผู้ใช้กลับไปยังช่วงพักโฆษณานั้น
  2. หลังจากช่วงพักโฆษณาสิ้นสุดลง ให้นำผู้ใช้กลับไปยังตำแหน่งเดิมที่ผู้ใช้เลื่อนแถบเลื่อน

ในรูปแบบแผนภาพ จะมีลักษณะดังนี้

วิธีใช้การย้อนกลับโดยใช้ 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;
  }
}