Description
Enhance the Flask-based blog platform by adding support for video uploads and streaming.
Admins (and optionally users) should be able to upload video content that is automatically processed for HLS (HTTP Live Streaming) playback, allowing smooth, adaptive streaming directly within blog posts.
Acceptance Criteria
-
Supabase Bucket Setup:
- Create a new Supabase Storage bucket named
videos.
-
Environment Configuration:
- Add an environment variable (e.g.,
SUPABASE_VIDEOS_BUCKET) in the .env file to store the video bucket name.
-
Upload Interface (Frontend):
- Add a video upload input field to
new.html and edit.html.
- On form submission, uploaded video files should be sent to the backend for processing and stored in the
videos Supabase bucket.
-
Backend Logic (app.py):
- Handle video upload requests from the frontend.
- Upload the video to Supabase Storage.
- Trigger a video processing routine (e.g., FFmpeg) to convert the uploaded file into HLS format:
- Segment the video into
.ts chunks.
- Generate an
.m3u8 playlist manifest.
- Save the HLS manifest URL in the database (
posts table or related videos table).
- Return the video stream URL to the template for playback.
-
Video Playback Integration:
- Update
post.html to embed a video player using the HTML5 <video> tag.
- The
<video> element should load the .m3u8 file for streaming.
- Consider using Hls.js (a lightweight JavaScript library) to ensure HLS playback in all browsers.
-
Error Handling:
- Implement error handling for:
- Failed uploads
- Invalid file formats
- Transcoding or streaming issues
- Show clear error or success messages in the UI.
Technical Considerations
-
Video Transcoding:
- Use FFmpeg on the server for converting uploaded videos to HLS format.
- Alternatively, integrate a lightweight cloud service or background worker (e.g., Celery task) if FFmpeg processing is slow.
-
Storage:
- Ensure the
videos bucket in Supabase has appropriate public/private access settings.
- Clean up unused video files when posts are deleted or updated.
-
Database Schema:
- Add a new field in the
posts table to store the video’s HLS manifest URL (e.g., video_url).
-
Performance:
- Consider asynchronous uploads and transcoding to prevent request blocking in Flask.
Dependencies
- FFmpeg (for video transcoding).
- Hls.js (for browser compatibility with
.m3u8 streams).
- Supabase Storage SDK (for video upload and
Description
Enhance the Flask-based blog platform by adding support for video uploads and streaming.
Admins (and optionally users) should be able to upload video content that is automatically processed for HLS (HTTP Live Streaming) playback, allowing smooth, adaptive streaming directly within blog posts.
Acceptance Criteria
Supabase Bucket Setup:
videos.Environment Configuration:
SUPABASE_VIDEOS_BUCKET) in the.envfile to store the video bucket name.Upload Interface (Frontend):
new.htmlandedit.html.videosSupabase bucket.Backend Logic (
app.py):.tschunks..m3u8playlist manifest.poststable or relatedvideostable).Video Playback Integration:
post.htmlto embed a video player using the HTML5<video>tag.<video>element should load the.m3u8file for streaming.Error Handling:
Technical Considerations
Video Transcoding:
Storage:
videosbucket in Supabase has appropriate public/private access settings.Database Schema:
poststable to store the video’s HLS manifest URL (e.g.,video_url).Performance:
Dependencies
.m3u8streams).