2 Media Elements Explained

Key Concepts

• st.image: Display images in Streamlit.
• st.audio: Embed audio files in Streamlit.
• st.video: Embed video files in Streamlit.
• Media Control: Options to control the playback of media elements.

st.image

st.image is used to display images in Streamlit. This function takes the image file path or URL as an argument and can also accept parameters like width, caption, and format.

import streamlit as st

st.image("https://example.com/image.jpg", caption="Sample Image", width=300)
    

st.audio

st.audio is used to embed audio files in Streamlit. This function takes the audio file path or URL as an argument and can also accept parameters like format.

import streamlit as st

st.audio("https://example.com/audio.mp3", format="audio/mp3")
    

st.video

st.video is used to embed video files in Streamlit. This function takes the video file path or URL as an argument and can also accept parameters like format.

import streamlit as st

st.video("https://example.com/video.mp4", format="video/mp4")
    

Media Control

Streamlit provides basic controls for media elements like play, pause, and volume adjustment. These controls are automatically added to audio and video elements, allowing users to interact with the media.

Examples

Example 1: Displaying an Image

import streamlit as st

st.title("Image Example")
st.image("https://example.com/image.jpg", caption="Sample Image", width=400)
    

Example 2: Embedding Audio

import streamlit as st

st.title("Audio Example")
st.audio("https://example.com/audio.mp3", format="audio/mp3")
    

Example 3: Embedding Video

import streamlit as st

st.title("Video Example")
st.video("https://example.com/video.mp4", format="video/mp4")
    

Analogies

Think of st.image as a digital picture frame that displays images. The st.audio function is like a digital music player that plays audio files, and st.video is like a digital TV that plays video files. The media controls are like the buttons on a remote control that allow you to play, pause, and adjust the volume.

By mastering media elements in Streamlit, you can create rich and interactive applications that include images, audio, and video, making your apps more engaging and informative.