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

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

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

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

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

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

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

วิธีใช้เวิร์กโฟลว์นี้ใน IMA DAI SDK ดังที่แสดงใน AdvancedExample

ป้องกันการข้ามโฆษณาที่ยังไม่ได้ดู

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

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

Objective-C

- (IBAction)videoControlsTouchStarted:(id)sender {
  [NSObject cancelPreviousPerformRequestsWithTarget:self
                                            selector:@selector(hideFullscreenControls)
                                              object:self];

  self.currentlySeeking = YES;
  self.seekStartTime = self.contentPlayer.currentTime;
}

- (IBAction)videoControlsTouchEnded:(id)sender {
  if (self.fullscreen) {
    [self startHideControlsTimer];
  }
  self.currentlySeeking = NO;
  if (!self.adPlaying) {
    self.seekEndTime = CMTimeMake(self.progressBar.value, 1);
    IMACuepoint *lastCuepoint =
        [self.streamManager previousCuepointForStreamTime:CMTimeGetSeconds(self.seekEndTime)];
    if (!lastCuepoint.played && (lastCuepoint.startTime > CMTimeGetSeconds(self.seekStartTime))) {
      self.snapbackMode = YES;
      // Add 1 to the seek time to get the keyframe at the start of the ad to be our landing
      // place.
      [self.contentPlayer
          seekToTime:CMTimeMakeWithSeconds(lastCuepoint.startTime + 1, NSEC_PER_SEC)];
    }
  }
}

Swift

@IBAction func progressBarTouchStarted(_ sender: UISlider) {
  guard !isAdPlaying else { return }
  currentlySeeking = true
  seekStartTime = contentPlayer.currentTime().seconds
}

// MARK: Snapback Logic
@IBAction func progressBarTouchEnded(_ sender: UISlider) {
  guard !isAdPlaying else { return }
  if isFullScreen {
    startHideControlsTimer()
  }
  currentlySeeking = false
  seekEndTime = Float64(sender.value)

  guard let streamManager else { return }

  if let lastCuepoint = streamManager.previousCuepoint(forStreamTime: seekEndTime) {
    if !lastCuepoint.isPlayed, lastCuepoint.startTime > seekStartTime {
      logMessage(
        "Snapback to \(String(format: "%.2f", lastCuepoint.startTime)) from \(String(format: "%.2f", seekEndTime))"
      )
      snapbackMode = true
      contentPlayer.seek(
        to: CMTime(seconds: Double(sender.value), preferredTimescale: 1000))
    }
  }
}

กลับไปยังตำแหน่งเดิมที่เลื่อนแถบเลื่อน

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

หากต้องการกลับไปยังตำแหน่งเดิมที่ผู้ใช้เลื่อนแถบเลื่อน ให้ทำดังนี้

  1. ฟังเหตุการณ์ AD_BREAK_ENDED ใน Stream Manager

  2. ตรวจสอบว่าแฟล็ก snapbackMode ทำงานอยู่หรือไม่ เพื่อให้แน่ใจว่าการข้ามนี้เกิดขึ้นหลังจากมีการบังคับให้แสดงการดูโฆษณา

  3. หากทำงานอยู่ ให้เลื่อนแถบเลื่อนของโปรแกรมเล่นไปยังเวลาปลายทางที่บันทึกไว้เพื่อนำผู้ใช้กลับไปยังการประทับเวลาที่ต้องการ

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

Objective-C

case kIMAAdEvent_AD_BREAK_ENDED: {
  [self logMessage:@"Ad break ended"];
  self.adPlaying = NO;
  if (self.snapbackMode) {
    self.snapbackMode = NO;
    if (CMTimeCompare(self.seekEndTime, self.contentPlayer.currentTime)) {
      [self.contentPlayer seekToTime:self.seekEndTime];
    }
  }
  break;
}

Swift

case .AD_BREAK_ENDED:
  logMessage("Ad break ended")
  isAdPlaying = false
  progressBar.isUserInteractionEnabled = true
  if snapbackMode {
    snapbackMode = false
    if contentPlayer.currentTime().seconds < seekEndTime {
      contentPlayer.seek(to: CMTime(seconds: Double(seekEndTime), preferredTimescale: 1000))
    }
  } else if pendingBookmarkSeek, let time = bookmarkStreamTime {
    logMessage(String(format: "AD_BREAK_ENDED: Seeking to bookmark streamTime: %.2f", time))
    imaVideoDisplay.seekStream(toTime: time)
    pendingBookmarkSeek = false
    bookmarkStreamTime = nil
  }
  updatePlayHeadState(isPlaying: self.isContentPlaying)