กระดุมแป๊ก

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

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

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

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

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

ต่อไปนี้เป็นวิธีการนำ Snapback ไปใช้ IMA DAI SDK ดังที่แสดงใน ตัวอย่างขั้นสูง

ป้องกันไม่ให้ระบบเลิกดูช่วงพักโฆษณา

ตรวจสอบว่าผู้ใช้ได้ทำการค้นหาที่ผ่านช่วงพักโฆษณาที่ไม่ได้ดูไปแล้วหรือไม่ ให้ย้อนกลับไปที่ช่วงพักโฆษณา ใน HTML5 SDK ให้ตั้งค่า Listener เหตุการณ์ในเหตุการณ์ seeked ของโปรแกรมเล่นวิดีโอ เพื่อทริกเกอร์ onSeekEnd() วิธีการดังกล่าว (แสดงอยู่ด้านล่าง) จะตรวจสอบจุดเริ่มโฆษณา ก่อนถึงเวลาที่ผู้ใช้ค้นหา หากยังไม่ได้เล่น ให้ข้ามไปที่ตอนเริ่มต้น แทนจุดกรอโฆษณาที่ต้องการในตอนแรก และบันทึก จุดกรอไปยัง 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 ได้รับการตั้งค่าแล้ว ถ้ามี ให้นำผู้ใช้ไปยังจุดนั้นในสตรีม เนื่องจากโฆษณา ผลจาก Snapback คือ

function onAdBreakEnded(e) {
  videoElement.controls = true;
  clickElement.style.display = 'none';
  adUiDiv.style.display = 'none';
  if (snapForwardTime && snapForwardTime > videoElement.currentTime) {
    videoElement.currentTime = snapForwardTime;
    snapForwardTime = null;
  }
}