How to Display a Video in Django
In this article, we show how to display a video in Django.
A video is really a static file.
In Django, all static files go into the static directory. This includes images, videos, CSS files, javascript files, etc.
So you would have a static directory and inside of this static directory to separate and organize different files, best practice is to create an images directory, a videos directory, a css directory, javascript directory, etc.
So in this program, we follow the convention of creating a static directory in the app we're working with and then in the static directory, we create a videos directory. We then put all videos in this videos directory.
Now regarding the page where we actually display the video.
To display any static files within an app, at the top of the page, you must put the following line.
What this line does is it allows you to access files within the static directory.
We display a video in Django using the HTML video tag.
In Django, the typical video through the HTML video tag is displayed through the following code.
So, let's now dissect what is going on in this code.
So, again, we show a video by means of the HTML video tag.
Inside of this video tag, we specify the width and height. And since we want the video to have controls, such as a play/pause button, volume control, etc, we place in the word, controls.
We then have the source tag. Inside of this tag, we specify the path to the video file through the src attribute.
Realize that static files include files that do not change in value over time; in other words, files that aren't dynamic.
Static files include css files, images, videos, etc.
So inside of the static file, we have a videos directory. Inside of this videos directory, we store our videos. In this example, we are going to show the file, google-guru.mp4. With the videos tag, you must specify that the type attribute, which is what type the video file is (in this case, an mp4 file). In standard HTML, the path would be specified by the line, src="videos/google-guru.mp4". However, with Django, this does not work. How you specify the location of an image in Django is in between {% %}. In between these brackets, you specify static 'videos\\google-guru.mp4', where google-guru.mp4 is the video that you want to display, which is inside of the videos directory in the static directory you create for the current app you are in.
In between the videos tags, we have the line, Your browser does not support the video tag. This is shown in the event that a web browser cannot render the video.
We then close the video tag.
Static Directory
In Django's official documentation, it recommends that you keep all static files, such as images, videos, javascript files, CSS files, etc. in the static directory of the app you are using.
Say, let's say you create an App called Articles (where you keep the articles you write for your website). Inside of this app, you need to create a static directory. Inside of this static directory, you should create a directory called videos. Inside of this videos directory, you put all the videos for this Articles directory. You can then reference videos using the path described above, which again is, src="{% static 'videos\\video_to_display.png' %}"
One thing to check in your project directory is the settings.py file.
Make sure that in this file, normally present at the very end of the file, is the following statement shown below.
Without this line of code, Django will not know that the directory static contains the static files. So make sure that this line is present.
And this is all that you need to display a video in Django.
Related Resources
How to Show All Tables of a MySQL Database in Python
How to Count the Number of Rows in a MySQL Table in Python