Video Upload and display on a Django Website

11,182

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>
Share:
11,182
Aakash
Author by

Aakash

Updated on June 04, 2022

Comments

  • Aakash
    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
      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
      Aakash over 4 years
      @Sanip What I meant is that the video which is uploaded is not getting displayed on the browser.
    • Sanip
      Sanip over 4 years
      Try using src="{{ object.videofile.url }}" instead of src="{% static 'deploy/object.videofile' %}"
    • hansTheFranz
      hansTheFranz over 4 years
      in 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
      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
      Sanip over 4 years
      @Aakash can you post the full template?
    • Aakash
      Aakash over 4 years
      @Sanip Sure, here you go
    • Sanip
      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
    Aakash over 4 years
    I am sorry to inform that I have tried this already, but it didnt helped.
  • Sanip
    Sanip over 4 years
    Have you tried inspecting the source file path being displayed in your html page?
  • Sanip
    Sanip over 4 years
    Which view renders the video_list.html template? And are you passing Video.objects.all() in a DetailView? Also no model specified in the VideoDetailView
  • Aakash
    Aakash over 4 years
    kindly 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
    Aakash over 4 years
    you 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
    Sanip over 4 years
    DetailView is meant for just passing the detail for a single object. Here you have passed all the objects of the Video object. This is not what DetailView is meant for. For better understanding, refer to this: docs.djangoproject.com/en/2.2/ref/class-based-views/…
  • Sanip
    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.