Skip to main content

So I’m trying to make a TikTok style demo where you can scroll through videos by dragging up, and (minimally) a pause and mute button. Here’s my problem (bug?) – When I scroll from one frame to the next, sometimes the audio track of the first video plays over the audio track of the second video.


Steps to reproduce:



  1. play first video (it’s on Autoplay anyway)

  2. Tap to pause first video

  3. Scroll up to play second video

  4. Tap to pause second video. Notice that audio from first video is playing

  5. Tap to unpause second video. Notice that audio from second video is playing

  6. Scroll up to play third video

  7. Tap to pause third video. Notice that audio from first and second videos are playing


I have tried all three State Management checkboxes in my drag/navigate interaction (Reset Scroll Position/Component State/Video State) but nothing changes.


I would think that when navigating away from one frame to another would stop a video… can anyone suggest a workaround for this behavior?


Thank you all.

Here is a screenshot


Screenshot 2023-10-13 at 12.01.43 AM

Here is a screen recording of what is going wrong. Hope someone can help. Thanks!

Has anybody else noticed this functionality (bug)?

Hi,


I am also working on a similar project and was facing the same problem until I figured out how to solve it.


You have to mute all the videos except the one that is being shown on each frame.


Screenshot 2023-10-23 154818


In this case, the video that is selected (the one with the bearded boy) is not shown on the current frame, so I muted it. On the next frame, I muted the one that was previously displayed and so on.


Hope it works for you.

Thanks for your message, but how do you mute the video once you have already navigated away to another frame?


Can you attach an example of your workaround? Thanks! 🙂

Okay I found a workaround – I have to give each video its own name (i.e., “Video1”, “Video2”, “Video3”, etc.) and then the video automatically gets muted when navigating to another frame or section.


I still regard this as a bug (since it does not encourage reusable code in frames/sections) but at least there is a workaround for now.


Thanks!

This works perfectly! Thank you 🙌

Reply


Terms & ConditionsCookie settings