Playing videos one after each other

🧑‍💻 Technical Support
1

Hi! I am new here and I was trying to create a component which works like this:

  1. After first video(triggered by the target image) ended, user sees the preview of the next video
  2. User is suggested to tap the preview to play the next video
    For some reason after first video played, the preview of the next video doesn’t appear. I added console.log to the addEventListener(‘ended’, () , so the function itself seems to be working.
    How can I fix it?
const playVideoComponent = {
  schema: {
    video: {type: 'string'},
    left: {type: 'string'},
    leftPreview: {type: 'string'},  // URL for left video preview image
    canstop: {type: 'bool'},
  },
  init() {
    const v = document.querySelector(this.data.video)
    const p = this.data.thumb && document.querySelector(this.data.thumb)
    const {el} = this
    const l = document.querySelector(this.data.left)
    const leftPreviewEl = document.querySelector(this.data.leftPreview)  // Element for left video preview image
    const tapped = false

    el.setAttribute('material', 'src', p || v)
    el.setAttribute('class', 'cantap')
    let playing = false

    // Play Pause functionality (plays main video)
    el.addEventListener('click', () => {
      if (!playing) {
        el.setAttribute('material', {
          src: v,
          shader: 'chromakey',
          color: '0.1 0.9 0.2',
        })
        v.play()
        playing = true
      } else if (this.data.canstop) {
        v.pause()
        playing = false
      }
    })

    // Transition to paused state upon main video ending
    v.addEventListener('ended', () => {
      playing = false  // Update playing state
      console.log('First video ended!')
    })

    // Play left video on click of preview image
    leftPreviewEl.addEventListener('click', () => {
      if (!playing) {
        l.play()
        playing = true  // Update playing state
      }
    })

    
    const foundTarget = () => {
      if (playing) {
        v.play()
      }
    }

    const lostTarget = () => {
      if (playing) {
        v.pause()
      }
    }

    el.parentNode.addEventListener('xrextrasfound', foundTarget)
    el.parentNode.addEventListener('xrextraslost', lostTarget)
    this.el.sceneEl.addEventListener('disconnected', () => {
      el.parentNode.removeEventListener('xrextrasfound', foundTarget)
      el.parentNode.removeEventListener('xrextraslost', lostTarget)
    })
  },
}

export {playVideoComponent}
2

It appears that the critical part of showing the preview for the next video after the first video ends isn’t explicitly implemented in the provided code snippet. Your addEventListener for the ended event on the first video (variable v) correctly logs a message to the console, indicating that the event listener is firing, but it doesn’t contain logic to actually change the displayed content to the preview of the next video.

Here’s a strategy to fix this issue:

  1. Display the Next Video Preview After the First Video Ends: You’ll need to change the element’s material source to the preview image of the next video when the first video ends. This involves setting the el’s material source to this.data.leftPreview within the ended event listener for the first video.
  2. Ensure Preview Image is Correctly Referenced: You mentioned a variable p that seems intended for a thumbnail/preview but isn’t used within the ended event. Ensure you are referencing the correct property for the preview image (leftPreview) and that it’s correctly initialized and used within the event listener.
  3. Check for Potential Typographical Error: In the init function, there’s a reference to this.data.thumb which isn’t defined in your schema. If this is supposed to be the preview image, it should likely be this.data.leftPreview.

Let’s adjust the relevant part of your code to address these points:

// Transition to paused state upon main video ending and show next video preview
v.addEventListener('ended', () => {
  playing = false; // Update playing state
  console.log('First video ended!');
  // Update to show next video preview
  if (leftPreviewEl) { // Check if the preview element exists
    el.setAttribute('material', 'src', this.data.leftPreview); // Change to show preview image
    console.log('Showing next video preview');
  } else {
    console.log('Preview element not found');
  }
});
3

Thank you for the help!

1 Like