0

During the development of my project I could display video files through my templates like this:

<video width="200" controls>
    <source src='{{ MEDIA_URL }}{{ post.video }}' type='video/mp4'>
    Your browser does not support the video tag.
</video>

MEDIA_URL was directed to a media folder in settings.py:

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

Now I am in production and using Digital Ocean Spaces, my static and media files are both served by STATIC_URL. When a user creates a post that contains a video file I can see it uploaded in Spaces, I can also view it through the Django admin. But I cannot find the code I need to make it playable on the site anymore. I just see a grey box telling me the file is not supported. I have tried changing {{ MEDIA_URL}} to {{ STATIC_URL }}, I have also tried <source src='{% static "post.video" %}' type='video/mp4' but neither of these have worked. I cannot find the answer to this anywhere online. Hope somebody can help.

sgt_pepper85
  • 421
  • 4
  • 14
  • 1
    You have to configure Nginx like so location /static/ { root YOUR_PROJECT_PATH; } location /media/ { root YOUR_PROJECT_PATH;; } – Temi 'Topsy' Bello Dec 18 '20 at 15:33
  • Hi thank you for the response. I am a real beginner to all this server stuff. Can you please explain what you mean by configure Nginx? – sgt_pepper85 Dec 18 '20 at 15:44
  • 1
    As you were deploying to digitalocean, what server engine are you using? I am assuming you deployed on a droplet? – Temi 'Topsy' Bello Dec 18 '20 at 16:48
  • Yes I did. I used Ubuntu/Gunicorn/Nginx but I am no expert in this area. I followed a tutorial to guide me. – sgt_pepper85 Dec 18 '20 at 16:53
  • Fyi, my images, fonts, CSS etc. is uploading already from my Spaces folder. It is only the video files that I cannot get to work – sgt_pepper85 Dec 18 '20 at 17:03
  • 1
    Does this mean your videos are in another folders apart from the css and images? – Temi 'Topsy' Bello Dec 18 '20 at 20:58
  • I have separate sub-folders for css, images, videos etc. but they are all contained within the same main folder. – sgt_pepper85 Dec 19 '20 at 05:38
  • 1
    So this means your media and static are in the same main folder. In that case, you should be using STATIC_URL. When you inspect element in your browser to check the path of STATIC_URL, what shows up? Have you also done /manage.py collectstatic? – Temi 'Topsy' Bello Dec 19 '20 at 19:36
  • Yes I have done collectstatic. When I inspect the element it shows up correctly as if it is working fine. I have also set the content type by managing metadata on the Spaces control panel. Still nothing... – sgt_pepper85 Dec 20 '20 at 05:13
  • 1
    Can you print your console and do a screenshot? Do you see any errors? Maybe video rendering errors? – Temi 'Topsy' Bello Dec 20 '20 at 19:57
  • Finally it works. I was missing `url` off the end of my template tag. Didn't need that during development but apparently it's necessary in production. Cheers so much for your help. – sgt_pepper85 Dec 21 '20 at 09:29

1 Answers1

0

The solution was to change the template to read:

<video width="200" controls>
    <source src='{{ STATIC_URL }}{{ post.video.url }}' type='video/mp4'>
    Your browser does not support the video tag.
</video>
sgt_pepper85
  • 421
  • 4
  • 14