Radio button with video

🎈 Using Streamlit
1

Summary

I would like to show several videos and let the user select a video with a radio button

Steps to reproduce

        col1, col2 = st.columns(2)
        dict_video_paths = {
            index: col2.video(path) for index, path in enumerate(video_paths)
        }
        col1.radio(
            "select video",
            list(dict_video_paths.keys()),
            format_func=lambda x: dict_video_paths.get(x),
        )

Expected behavior:

should show radio button and video beside it

Actual behavior:

shows radio button and video object and video

Debug info

  • Streamlit version: 1.16.0
  • Python version:3.9.13
2

Here is a sample code.

import streamlit as st

# Define a list of video paths.
video_paths = [
    'https://media.istockphoto.com/id/1190217929/video/golden-glitter-flight-with-sparkling-light-shining-christmas-particles-intro.mp4?s=mp4-640x640-is&k=20&c=6kxqEa6B2wf-DA3mVeuR_m2WWqFDi_n_ZePinVsBpdI=',
    'https://media.istockphoto.com/id/1347266466/video/luminous-christmas-shooting-star.mp4?s=mp4-640x640-is&k=20&c=VJxeGjcY81qmmDiguJi43296jo8AS7jfWGzv6cbANq8='
]

col1, col2 = st.columns(2)

# Generate a dictionary from a list so that it is easier to get the video path.
dict_video_paths = {
    f'Video {index + 1}': path for index, path in enumerate(video_paths)
}

# Show the buttons in column 1.
selected = col1.radio(
    "select video",
    dict_video_paths.keys(),
)

# Show the selected video in column 2
col2.video(dict_video_paths[selected])
col2.markdown(f'### {selected}')

Image

image
image721×282 30.8 KB

References

video
radio