How to Play Videos with Django 5.1

I’m making a website with Django 5.1 and bootstrap 5.3 that generates projects and each project has its own video. I want to show the video of each project. The videos are being saved in the local media/video folder. The way to load the videos I did it with a upload_to in my models.py and it saves the videos well but I don’t know how to play the videos.

Welcome @avilca !

You would add a <video> element to your template, with the <source> element having a reference to the url for the video in the src attribute.

See <video>: The Video Embed element - HTML: HyperText Markup Language | MDN for more details.

A file video is a static file ??

If it has been uploaded by a user, then it’s technically a media file, not a static file. That means you get the url from the model instance and not using the static tag.

The user can upload n projects and each project have a video

example:

project1 —> video 1
project2 —> video 2
project3 —> video 3
.
.
.
N

models.py

class Project(models.Model):
    title = models.CharField(max_length=200, verbose_name='Título')
    description = models.TextField(verbose_name='Descripción')
    filevideo = models.FileField(upload_to='media/videos/', null=True)`

settings.py

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.1/howto/static-files/

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    BASE_DIR / 'media',
]

proyectos.html

{% block content %}

<br/>
<main class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <div class="card">
          <div class="card-body">
             {% for project in projects %}
  
                <h5 class="card-header">{{project.title}} </h5>
                <p class="card-text">
                  {{project.description}}
                </p>

                <video src="..." class="object-fit-contain" autoplay>
                   {{project.filevideo}}
                </video>

            {% endfor %}
          </div>
         
        </div>

      </div>
    </div>
</main>

    

{% endblock %}

Show me web

imagen

Any suggestions ???

What is your question?

Switch to this form but still doesn’t show the video

<video src= {{project.filevideo}} class="object-fit-contain" autoplay>

How to display the video ?

See the docs and the example referenced above at How to Play Videos with Django 5.1 - #2 by KenWhitesell. You don’t put the src attribute on the <video> element, you use the src attribute on the <source> element.

You also need to use the .url property of the file field on the model to render the url to be used in the src attribute.