Dash video player to play local videos

Dash Python
1

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

2

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

3

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)
4

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

5

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

6

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!