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.