Streamlit: how to auto play audio, video including video size - Sheng's Blog

I am currently working on the talking avatar project and use streamlit to build the demo. Streamlit audio and video function cannot support autoplay and change video window size when playing. Search and find a solution foor audio, i.e. encoding audio into base64 and use native HTML tag to control audio play. But for video, not find one. Using similar method, encoding video into base64 with HTML video tag, it work well. The following are sample function code and actual result:

def autoplay_audio(wav_file, is_auto = True):
    with open(wav_file, "rb") as f:
        data = f.read()
        b64 = base64.b64encode(data).decode()
        if is_auto:
            md = f"""
                <audio controls autoplay="true">
                <source src="data:audio/mp3;base64,{b64}" type="audio/wav">
                </audio>
                """
        else:
            md = f"""
                <audio controls autoplay="false">
                <source src="data:audio/mp3;base64,{b64}" type="audio/wav">
                </audio>
                """

    return md

def autoplay_video(video_file, is_auto = True):
    with open(video_file, "rb") as f:
        data = f.read()
        b64 = base64.b64encode(data).decode()
        if is_auto:
            md = f"""
                <video controls width=320 height=240 autoplay>
                <source src="data:video/mp4;base64,{b64}">
                </video>
                """
        else:
            md = f"""
                <video controls width=320 height=240 autoplay muted>
                <source src="data:video/mp4;base64,{b64}">
                </video>
                """
    return md

FEATURED TAGS

computer program javascript nvm node.js Pipenv Python 美食 AI artifical intelligence Machine learning data science digital optimiser user profile Cooking cycling green railway feature spot 景点 work technology F1 中秋节 dog setting sun sql photograph Alexandra canal flowers bee greenway corridors programming C++ passion fruit sentosa Marina bay sands pigeon squirrel Pandan reservoir rain otter Christmas orchard road PostgreSQL fintech sunset thean hou temple in sungai lembing 海上日出 SQL optimization pieces of memory 回忆 garden festival ta-lib backtrader chatGPT stable diffusion webui draw.io streamlit LLM prompt engineering fastapi stock trading artificial-intelligence