Play multiple videos simultaneously

[Whitney_Huang]

1. Are you running your app locally or is it deployed? locally
2. If your app is deployed:
   a. Is it deployed on Community Cloud or another hosting platform? No
   b. Share the link to the public deployed app. N/A
3. Share the link to your app’s public GitHub repository (including a requirements file). N/A (closed-source)
4. Share the full text of the error message (not a screenshot). N/A
5. Share the Streamlit and Python versions. streamlit==1.30, Python 3.10.12

There was a topic posted a few years ago about playing multiple videos simultaneously, but it looks like that topic was closed:

Synchronizing multiple videos in streamlit

I have a detection model of which I show the outputs in a streamlit video, but I also want the user to be able to see the ground truth video playing at the same time. Right now I just have two st.video() but the user needs to click fast on the first play button and on the second one to be synchronized. I would like to know if there is a way to start the second video when the first one starts

Are there any plans to support this in the future? Even adding an additional button that will trigger the “play” button on all videos would suffice for my use case. Thanks!

[edsaac]

How about:

import streamlit as st

cols = st.columns(2)

with cols[0]: st.video("star.mp4")
with cols[1]: st.video("star.mp4")  

if st.button("Play all videos", use_container_width=True):
    st.components.v1.html(
        """<script>
        let videos = parent.document.querySelectorAll("video");
        videos.forEach(v => {
            v.play();
        })
        </script>""", 
        width=0, height=0
    )

They are not perfectly synchronized but it does the job of pressing play for all of them.