Skip to content

Feature: Implement Video Upload and Streaming Functionality #10

@AmanatAliPanhwer

Description

@AmanatAliPanhwer

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

Metadata

Metadata

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions