CODEWITHSUNDEEP
pythondjangovideo
TheSprinter
TheSprinter

Reputation: 358

Django: Why won't my video display in template? (Error "No video with supported format and MIME type found")

I have a page in which a user can do several things and that should display a video the user uploaded, but I get this error ("No video with supported format and MIME type found"), even though—I think—I am doing exactly what I have found online in several places.

These are my MEDIA_ROOT and MEDIA_URL in settings.py:

MEDIA_URL = 'media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Inside the media directory, I have subdirectories for each user, which are created—if they don't exist already—when a user creates a project and uploads a video. Inside the user subdirectories, there is one directory for each project the user creates. Inside these, several files exist, including the video. So, for the test I'm doing right now, this is the structure:

|— media
    |— user_3
        |— Test_project
            |— video_file.mp4
            |— irrelevant_file
            |— irrelevant _file   
            ...

The video is a FileField in a model I called Project.

In my view, I get the video url and pass it to the template in the following way:

(I am omitting any part of the code that is irrelevant to this issue)

def sample_view(request, project_id):
    
    video = Project.objects.get(pk=project_id).video_file.url
    # ... some irrelevant code
    
    # The formset has always worked. I am only showing it here just in case it's relevant as to how I'm passing the context to the template.
    context = {'formset': formset, 'video': video}

    return render(request, 'AppDir/editor.html', context}

In my template:

<video width="320" height="240" controls>
    <source src="{{ video }}" type="video/mp4">
</video>

All this results in the error I have mentioned.

To see what is exactly being passed to the template, I printed my video variable (in my view) to the console, and also created a <p> with {{ video }} in my template to see it there too. In both I got: media/user_3/Test_project/video_file.mp4

And this appears correctly in my browser inspector as the src attribute.

I also tried doing the query with Project.objects.get(pk=project_id) (instead of Project.objects.get(pk=project_id).video_file.url) and then use this in my template <source src="{{ video.video_file.url }}" type="video/mp4">, but I get the same error.

Something I find interesting and that I thought may be causing the problem—and that I don't know how to address—is that, in the console, when I go to the page, I see:

Not found: editor/206/media/user_3/Test_project/video_file.mp4

... some other things

Not found: /media

editor/206 is the url for the editor page and 206 is the project's pk that I use to serve all the contents.

Based on what the documentation says here, I then added this to my URLconf:

from django.conf import settings
from django.conf.urls.static import static

url_patterns = [
    # ... some patterns
    path('editor/<int:project_id>/', views.sample_view, name='editor'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_URL)

Still, I get the same error.

So, I'm guessing this is caused by the browser trying to find the video in that folder (editor/206/media/user_3/Test_project/video_file.mp4), which doesn't exist. I thought adding that code snippet to my URLconf would probably fix that, but it didn't. As I said, I found in several that you just need to pass the video's url just as I did, but never saw something like this mentioned.

Upvotes: 0

Views: 1334

Answers (1)

ha-neul
ha-neul

Reputation: 3258

Your MEDIA_URL setting is off. In your settings.py:

MEDIA_URL = '/media/' # need "/"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Because there is no / in your media url, the url you got is media/user_3/Test_project/video_file.mp4. This can only append to current url.

Below is not necessary but it's better to do this way. Because I am sure you have other fields in Project that you want to render in your template.

views.

def sample_view(request, project_id):
    
    project = Project.objects.get(pk=project_id) # use project 
    
    context = {'formset': formset, 'project': project} # use project

    return render(request, 'AppDir/editor.html', context}

and in template

<source src="{{ project.video_file.url }}" type="video/mp4">

Upvotes: 1

Related Questions