Playing Video with Django and html5 tag

Question

I am trying to play a video by using django with html5 video tag but couldn't.
The main problem is that the server cannot get a video file.
I got this error:

[06/Jan/2014 23:52:07] "GET absolute_path_of_media/sample.mp4 HTTP/1.1" 404 2422

and in inspect elements:

get error

Here, I will show you my code.
templates/videoplay.html:

{% extends "app/base.html" %}
{% block contents %}
<video name='demo' controls autoplay width='50%' height='40%'>
<source src="{{media}}/sample.mp4" type="video/mp4"></source>
</video>
{% endblock %}

views.py:

def index(request):
    return render(request, "app/videoplay.html", {'media': MEDIA_ROOT})

I imported MEDIA_ROOT from settings.py and it is absolute path of media directory.

develop environment:

browser: chrome 
django:1.6.1
python:2.7

static and media directories' relation:

mysite/
      static/
            sample.mp4
      media/
            sample.mp4
      templates/
            ....
      views.py
      ....

ptr · Accepted Answer · 2014-01-06T16:33:11.990

9

You're missing the slash at the start of the file URL, and you don't need to pass the MEDIA_ROOT into the context, use the {{ STATIC_URL }} template variable that you set in your settings file.

To clarify from the comments below, your MEDIA_ROOT setting is where django will store media files (user uploaded). The STATIC_ROOT is where django will look for static files (your js/css/images etc).

The STATIC_URL and MEDIA_URL settings are used in the template. They will be set to something like STATIC_URL = "/static/" and MEDIA_URL = "/media/" and they are passed to the template by django so when you do:

<img src="{{ STATIC_URL }}sample.jpg" />

or

<source src="{{ MEDIA_URL }}sample.mp4" type="video/mp4"></source>

it replaces {{ STATIC_URL}} with "/static/" so you end up with "/static/sample.jpg" as the src url which django uses to fetch your file from the STATIC_ROOT.

edited Jan 06 '14 at 16:33

answered Jan 06 '14 at 15:40

ptr

3,292
2
24
48

I changed src as `` and it worked!!! Thank you ! but I don't know why it worked and why it doesn't work when I use `media` directory. I also tried this: `../media/sample.mp4` but it doesn't work though when I tried `../static/sample.mp4`, it worked. I don't know why... Could you please explain the reason ? because I wanna put `video`files into media directory. (I put `sample.mp4`file both media and static directories) – SamuraiT Jan 06 '14 at 15:50
I meant : `../../media/sample.mp4` and `../../static/sample.mp4` – SamuraiT Jan 06 '14 at 16:05
in your settings.py file you will have defined `STATIC_URL = /static/` (or similar). Django passes STATIC_URL to the template for you. As for static vs media, I don't think you want your video file in both. static is for website content (images, javascript/css, videos etc) that YOU display on the website. Media is for user uploaded content e.g. pictures that users upload for their profile. – ptr Jan 06 '14 at 16:15
uh I understand. but since I am creating web application that users can upload their `video files` and they can play those `video files`, django needs to access media directory to play `video files`. or Should I put user upload files into static files and play them ? – SamuraiT Jan 06 '14 at 16:22
I tried Timmy O'Mahony's [answer](http://stackoverflow.com/questions/6418072/accessing-media-files-in-django) and now I can play video files that is in media dir. I understand as django doesn't support media dir by default and we need to tell the url path to django. Thank you for your answer ! I could understand django bit more ! – SamuraiT Jan 06 '14 at 16:42
I didn't notice of you edit. I tried `{{ MEDIA_URL }}` and I solve the problem ! without setting URLconf! Thank you so much of your kindness ! – SamuraiT Jan 06 '14 at 16:49
no, I needed to add media URLconf. It worked because of cache. – SamuraiT Jan 06 '14 at 16:58
Hey, I tried this and it worked perfectly fine but I'm still facing a problem: I can't skip forward or backward in the video. And when I reload the page, I see some kind of an error. (the controls of the video are visible. Volume, fullscreen and download and also the pause button are working just fine. I'm talking about the 'seek' bar) I'm using Django 2.1.5 and Python 3.6.5 – S.Ahmed Jan 11 '19 at 19:28

score 8 · Answer 2 · answered May 22 '15 at 10:54

you can try this :

{% load staticfiles %}
<!DOCTYPE html>
<html>
<body>

<video width="530" height="440" controls autoplay>
  <source src="{% static "mov_bbb.mp4" %}" type="video/mp4"> </source>
</video>
</body>
</html>

setting.py

STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"), )

view.py

from django.views.generic.base import TemplateView


class HomeView(TemplateView):

    template_name = 'home.html'

urls.py

from django.conf.urls import url

from . import views

urlpatterns = [
    url(r'^$', views.HomeView.as_view(), name='home'),
]

static file:

static/
            mov_bbb.mp4

score 1 · Answer 3 · answered Jan 06 '14 at 15:39

1

You don't want the absolute path to your directory. You want the URL that the media is actually being served on, which might be something like "/static/sample.mp4" (or however you've configured STATIC_URL.

answered Jan 06 '14 at 15:39

Daniel Roseman

588,541
66
880
895

Playing Video with Django and html5 tag

3 Answers3

Linked