Problem with autoplaying html.Video Components

Dash Python
1

Hello All dash lovers!
Nice to meet you!!

I want post my local video !!
so I use html.Video
but It doesn’t play automatically
ChatGPT says it is because of browser’s policy
So, If I add muted option, it plays automatically!!

How can I play it automatically without ‘muted’ ??
I tried so many callbacks but I couldn’t find a right way…
please tips to me
I needs your help… Thanks!

from dash import Dash, html

app = Dash(name)

app.layout = html.Div(
[
html.Video(
id=‘movie_player’,
src=“assets/test.mp4”,
autoPlay=True,
# muted=True,
style={‘width’:‘50%’}
),
]
)

if name == “main”:
app.run(debug=True)

2

Use video.js, i was able to setup autoplay feature with sound on panorama video using video.js as the base

1 Like
3

Hello Again !!

Oh!! could I get a example please…?

4

You could probably get away with just using scripts from video.js added to the assets folder. But the proper way would be to build a video.js component for dash.

I would create a new project with dash boilerplate:

Then I would go to the video.js docs:

then I would build out the /src/lib/components/ .react.js file to support the video.js and test it out in the usage.py. Once you have it working you could upload it to pypi and use it as a pip install

also their are a lot of plugins that you could build on top of this setup:

but out of the box it supports a poster and auto play feature along with a button to have the video play in the corner of the browser while you continue scrolling

5

upon further investigation, don’t think you’ll find a solution. Its the browser that will not allow this to work unless the video is muted as you kinda mentioned. Tested a simple example of this, was able to get the video.js working in dash fairly simple:

import dash
from dash import html

app = dash.Dash(__name__)

app.layout = html.Div([
    # Include the Video.js CSS
    html.Link(
        rel='stylesheet',
        href='https://vjs.zencdn.net/8.16.1/video-js.css'
    ),

    # Video.js player with autoplay enabled
    html.Video(
        id='my-video',
        className='video-js vjs-default-skin',
        controls=True,
        autoPlay=True,  # Enable autoplay
        preload='auto',
        width='640',
        height='264',
        poster='/assets/MY_VIDEO_POSTER.jpg',
        **{'data-setup': '{"autoplay": true}'},  # Pass autoplay option to Video.js
        children=[
            html.Source(src='/assets/converted_stream.mp4', type='video/mp4'),
            # html.Source(src='/assets/MY_VIDEO.webm', type='video/webm'),
            html.P(
                "To view this video please enable JavaScript, and consider upgrading to a "
                "web browser that supports HTML5 video."
            )
        ]
    ),

    # Include the Video.js JavaScript
    html.Script(src='https://vjs.zencdn.net/8.16.1/video.min.js')
])

if __name__ == '__main__':
    app.run_server(debug=True, port='9111')

but the auto play will not work in this format. Sorry

6

Kinda working on my own thing atm…

Trying to get 360 video to live stream… but in testing I was able to get a 360 video to auto play with video.js with audo:

Idk why but posted video I posted on this form doesn’t included audio… but in actual practice of loading up the page their was video with audio so its possible but difficult

1 Like
7

Oh I thought you got a solution , but it was not !
It’s okay !! It is enough to know the expert like you can not make it , because that means it is impossible!!

I appreciate it that sharing the issue . I got stronger!!
thanks to you!!

thanks!!!

dash-component-boilerplate you mentioned looks like so tough for me,
when I get stronger then I try!! Thanks PIPINSALLPYTHON!

hmm… but… how about use callback??
at first, set the video muted and then turn it not muted by ‘auto callback or something!’

8

I think it is the best for me for now…

It plays with muted at first and then after turn to not muted and video stopped
then some people who interested in video would play the video !!


app = Dash(__name__)

app.layout = html.Div(
    [
        html.Video(
            id='movie_player',
            src="assets/test.mp4",
            controls=True,
            autoPlay=True,
            muted=True,
            style={'width':'50%'}
        ),


    ]
)
import time
@callback(
    Output('movie_player','muted'),
    Input('movie_player','loading_state'),
    prevent_initial_call=False
)
def hey(n):
    time.sleep(8)
    return False

if __name__ == "__main__":
    app.run(debug=True)