🚀 Gen 5 of the leading AI app deployment platform launches October 6. Click for the livestream.

Dash video player to play local videos

Hi,

I am making an app and I need to play locally stored .mp4 videos in the app. Is this possible with dash ? Is there any recipe or example to do this.

Thanks

You could use technic based on openCV provided here by replacing using cv2.VideoCapture with your video filename as arguement

Try this. You can put the video in your ./static/ directory (or where-ever, just specify the correct path).

import os
import dash
import dash_html_components as html

from flask import Flask, Response

server = Flask(__name__)
app = dash.Dash(__name__, server=server)


app.layout = html.Video(src='/static/my-video.mov',controls=True)  # or .mp4, or .avi ..etc


@server.route('/static/<path:path>')
def serve_static(path):
    root_dir = os.getcwd()
    return flask.send_from_directory(os.path.join(root_dir, 'static'), path)

I am trying your method and all I get is a blank video box any idea why that might be the case?

It could be a number of things. This can happen if you create the video using an incompatible codec. I believe I had a similar problem when trying to play a video produced with the internal maplotlib video producing function. I did have better success when I used FFMPEG.

For me, I had problems with the page refreshing the video. It seems that if the video name is the same, the page will not reload it. You need to have a different name each time (usually putting the time/date in the name is simple enough).

This project was some time ago for me. My finished app is in my github repo. Perhaps you could check here.: Video Object Removal, app.py

The video encoding I used is in the function writeFramesToVideo(), in the file imutil.py…specifically the FFMPEG option:
Video object removal, imutils.py

I got it in the end, turns out it was my lack of flask knowledge that was causing all the issues, your code massively helped, thank you sir!