กระดุมแป๊ก

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

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

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

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

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

วิธีใช้เวิร์กโฟลว์นี้ใน IMA SDK ของ HTML5 ดังที่แสดงในตัวอย่างขั้นสูง

ป้องกันไม่ให้ผู้ใช้หยุดดูช่วงพักโฆษณา

ตรวจสอบว่าผู้ใช้ทำการค้นหาที่เลยช่วงพักโฆษณาที่ไม่ได้ดูไปหรือไม่ และถ้ามี ให้นำผู้ใช้กลับไปยังช่วงพักโฆษณา ใน 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;
  }
}