In this post, we’ll go through creating a simple web application in Django that displays a list of videos and allows users to play them as a playlist. We’ll define a Video model, set up views and templates, and use JavaScript to handle the playlist functionality.
Step 1: Set Up the Django Project and App
Start by creating a Django project and app. If you don’t already have a Django project, you can create one as follows:
django-admin startproject videoplaylist cd videoplaylist python manage.py startapp videos
Add the videos app to the INSTALLED_APPS list in settings.py:
INSTALLED_APPS = [
...
'videos',
]
Step 2: Define the Video Model
In the models.py file of the videos app, create a Video model to store video details:
from django.db import models class Video(models.Model): title = models.CharField(max_length=200) description = models.TextField(blank=True, null=True) video_file = models.FileField(upload_to='videos/') def __str__(self): return self.title
Run the following commands to create and apply the migration:
python manage.py makemigrations python manage.py migrate
Step 3: Create a Video Upload Form
To allow uploading videos, define a VideoForm in forms.py:
from django import forms from .models import Video class VideoForm(forms.ModelForm): class Meta: model = Video fields = ['title', 'description', 'video_file']
Step 4: Set Up Views for Displaying and Uploading Videos
Create views in views.py for listing videos and uploading new ones:
from django.shortcuts import render, redirect from .models import Video from .forms import VideoForm def video_list(request): videos = Video.objects.all() return render(request, 'videos/video_list.html', {'videos': videos}) def upload_video(request): if request.method == 'POST': form = VideoForm(request.POST, request.FILES) if form.is_valid(): form.save() return redirect('video_list') else: form = VideoForm() return render(request, 'videos/upload_video.html', {'form': form})
Step 5: Configure URLs
In the videos app, create a urls.py file and define the routes for the views:
from django.urls import path from . import views urlpatterns = [ path('', views.video_list, name='video_list'), path('upload/', views.upload_video, name='upload_video'), ]
Include the app’s URLs in the project’s urls.py:
from django.contrib import admin from django.urls import path, include from django.conf import settings from django.conf.urls.static import static urlpatterns = [ path('admin/', admin.site.urls), path('', include('videos.urls')), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Configure MEDIA_URL and MEDIA_ROOT in settings.py for serving uploaded video files:
MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR / 'media'
Step 6: Create Templates
video_list.html
This template displays the list of videos and uses JavaScript to create a playlist:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Playlist</title>
</head>
<body>
<h1>Video Playlist</h1>
<div id="video-container">
<video id="video-player" width="640" height="360" controls></video>
</div>
<ul id="video-list">
{% for video in videos %}
<li data-video="{{ video.video_file.url }}">
<strong>{{ video.title }}</strong> - {{ video.description }}
</li>
{% endfor %}
</ul>
<script>
const videoPlayer = document.getElementById('video-player');
const videoList = document.getElementById('video-list');
const videoItems = videoList.querySelectorAll('li');
let currentVideoIndex = 0;
function playVideo(index) {
const videoItem = videoItems[index];
videoPlayer.src = videoItem.getAttribute('data-video');
videoPlayer.play();
}
// Play the next video when the current one ends
videoPlayer.addEventListener('ended', () => {
currentVideoIndex = (currentVideoIndex + 1) % videoItems.length; // Loop to the first video
playVideo(currentVideoIndex);
});
// Play the first video on page load
if (videoItems.length > 0) {
playVideo(currentVideoIndex);
}
</script>
</body>
</html>
upload_video.html
This template allows users to upload videos:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Video</title>
</head>
<body>
<h1>Upload Video</h1>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Upload</button>
</form>
<a href="{% url 'video_list' %}">Back to Playlist</a>
</body>
</html>
Step 7: Test the Application
Run the development server:
python manage.py runserver
- Visit http://127.0.0.1:8000/ to see the list of videos and play them in a playlist.
- Visit http://127.0.0.1:8000/upload/ to upload new videos.
Conclusion
Congratulations! You’ve built a basic Django web application to
manage and play video playlists. This project demonstrates how to work
with file uploads, display content dynamically, and enhance the user
experience using JavaScript. You can extend this application by adding
features such as user-specific playlists, video categories, or
integration with third-party streaming platforms.