Video Upload and display on a Django Website
Make sure you have maintained the media file settings. In your settings.py file:
MEDIA_URL = '/media/'
MEDIA_ROOT= os.path.join(os.path.dirname(BASE_DIR), "media_root")
Then in your main urls.py
:
urlpatterns = patterns('',
# ... the rest of your URLconf goes here ...
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Then make changes in your html file:
<source src="{% static 'deploy/object.videofile' %}" type='video/mp4'> //here
You are trying to fetch the video file as an static file. This is not the correct approach.
Try passing the url of the object's video file in the src
of the video as:
<br><br>
<video width='400' controls>
<source src="{{ object.videofile.url }}" type='video/mp4'>
Your browser does not support the video tag.
</video>
<br><br>
Aakash
Updated on June 04, 2022Comments
-
Aakash over 1 year
I have a model where I upload a video, i want to display the same in the browser but somehow I am not able to. Kindly help me.
I made an app with the name deploy, where I am uploading the video and saving it. Kindly tell me where I am doing wrong and what should be done here. I want the video which was uploaded should be displayed on the page and there should be a option for download as well. I shall be extremely thankful for the help.
My models.py file:
class Video(models.Model): Video_Description= models.CharField(max_length=500) slug = models.SlugField(unique=True) videofile= models.FileField(upload_to='deploy/videos/%Y/%m/%d/', null=True, verbose_name="") timestamp = models.DateTimeField(auto_now_add=True) class Meta: ordering = ['-timestamp'] def get_absolute_url(self): return reverse ("deploy:detail", kwargs={"slug":self.slug}) def __str__(self): return self.Video_Description + ": " + str(self.id)
My views.py file is:
class VideoDetailView(DetailView): queryset = Video.objects.all() class VideoListView(ListView): paginate_by = 10 # <app>/<modelname>_list.html def get_queryset(self, *args, **kwargs): qs = Video.objects.all() print(self.request.GET) query = self.request.GET.get("q", None) if query is not None: qs = qs.filter( Q(Video_Description__icontains=query) | Q(videofile__icontains=query)) return qs def get_context_data(self, *args, **kwargs): context = super(VideoListView, self).get_context_data(*args, **kwargs) return context
video_list.html file is:
{% extends "base.html" %} {% load static %} <body> <link rel="stylesheet" href="{% static 'deploy/cafeteria_cut.mp4' %} "> {% block content %} {% include "result/navbar.html" %}<br/> {% include "result/sidebar.html" %}<br/> {% include "result/calendar.html" %}<br/> <div style="margin-left: 10%"> <button type="button" class="btn btn-secondary btn-lg"><a href="{% url 'deploy:create' %}" style='color:white'>Upload Video</a></button> </div> {% for object in object_list %} <div class="container" style="margin-left: 10%; align-items: center;"> <h2> </br> <a href="{{ object.get_absolute_url }}"> {{ object.Video_Description }} </a> </br> </h2> </br> <a href="" style="align-items: center;"> {{ object.videofile}} </a> </br> <br><br> <video width='400' controls> <source src="{% static 'deploy/youtubeVideo_cut20.mp4' %}" type='video/mp4'> Your browser does not support the video tag. </video> <br><br> {% empty %} {% if request.GET.q %} <p style="padding-left: 20%; font-size: 70px">No Result Found </p> {% else %} <p style="padding-left: 20%; font-size: 70px"> No Result Yet. {% endif %} {% endfor %} {% endblock content %}
I am extremely sorry i failed to mention a very important thing, in my video_list.html file, when I do:
<br><br> <video width='400' controls> <source src="{% static 'deploy/youtubeVideo_cut20.mp4' %}" type='video/mp4'> Your browser does not support the video tag. </video> <br><br>
I am getting video displayed on the browser.
-
Sanip over 4 years'but somehow I am not able to'? Can you elaborate what you are not able to do? What is the problem you are facing?
-
Aakash over 4 years@Sanip What I meant is that the video which is uploaded is not getting displayed on the browser.
-
Sanip over 4 yearsTry using
src="{{ object.videofile.url }}"
instead ofsrc="{% static 'deploy/object.videofile' %}"
-
hansTheFranz over 4 yearsin your browser go with right click -> inspect element -> check the source of the video and the path is probably broken somehow. You can work your way up from this point
-
Aakash over 4 years@hansTheFranz it does say " Failed to load resource: the server responded with a status of 404 (Not Found) ", but I dont understand, I tried <source src="{{ object.videofile.url }}" type='video/mp4'> which is the right way but it didnt helped.
-
Sanip over 4 years@Aakash can you post the full template?
-
Aakash over 4 years@Sanip Sure, here you go
-
Sanip over 4 years@Aakash Can you check if the video file is being saved in the path that you specified? Maybe you are configuring the upload_to path incorrectly
-
-
Aakash over 4 yearsI am sorry to inform that I have tried this already, but it didnt helped.
-
Sanip over 4 yearsHave you tried inspecting the source file path being displayed in your html page?
-
Sanip over 4 yearsWhich view renders the
video_list.html
template? And are you passingVideo.objects.all()
in aDetailView
? Also no model specified in theVideoDetailView
-
Aakash over 4 yearskindly check the edit I made, if it might help in better understanding the problem. This is how I am doing it: class VideoCreateView(CreateView): form_class = VideoModelForm template_name = 'deploy/create_view.html' success_url = reverse_lazy("deploy:list")
-
Aakash over 4 yearsyou said no model specified in VideoDetailView. Would you please explain what is the need for it? I have just started working on Django, so i'll be thankful for the explanation.
-
Sanip over 4 years
DetailView
is meant for just passing the detail for a single object. Here you have passed all the objects of theVideo
object. This is not whatDetailView
is meant for. For better understanding, refer to this: docs.djangoproject.com/en/2.2/ref/class-based-views/… -
Sanip over 4 years@Aakash have a look at my edited answer if you have not set the settings for the media file. Else make sure the file is saved in the path specified.