DEV Community

irfan pasha
irfan pasha

Posted on

Hosting and Streaming a Video Using AWS S3 (Beginner Guide)

#aws #s3 #git #beginners

🚀 Hosting and Streaming a Video Using AWS S3 (Step-by-Step Guide)

As part of my AWS learning journey, I built a simple project to host and stream a video using Amazon S3 and documented the entire process using Git and GitHub.
This article walks through every step — from S3 configuration to pushing the project to GitHub.

🧩 Project Overview

Goal:
Host a video on AWS S3 and play it in a web browser using HTML.

What I learned:

  • Configuring public access in S3
  • Writing an S3 bucket policy
  • Embedding an S3-hosted video in HTML
  • Using Git to version control a project
  • Pushing code to GitHub

🛠️ Tools & Technologies Used

  • AWS S3
  • HTML5
  • Git
  • GitHub
  • Git Bash (Windows)

📁 Step 1: Create a Project Workspace

To keep all my projects organized, I created a dedicated workspace:

C:\Users\ipasha5\Projects
Enter fullscreen mode Exit fullscreen mode

Inside it, I created a project folder:

s3-video-hosting
Enter fullscreen mode Exit fullscreen mode

☁️ Step 2: Upload Video to AWS S3

  1. Created an S3 bucket (region: us-east-1)
  2. Uploaded the video file
  3. Disabled Block Public Access
  4. Added the following bucket policy to allow public read access: 
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::familyoutingvideo/*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

After this, the video was accessible via a browser URL.

🌐 Step 3: Create an HTML Page to Stream the Video

Inside the project folder, I created an index.html file:

<!DOCTYPE html>
<html>
<head>
    <title>AWS S3 Video Hosting</title>
</head>
<body>
    <h2>Video Hosted on AWS S3</h2>

    <video width="320" height="640" controls>
        <source src="https://familyoutingvideo.s3.us-east-1.amazonaws.com/VID-20260110-WA0000.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Opening this file in a browser successfully played the video.

🗂️ Step 4: Initialize Git Repository

From inside the project folder, I initialized Git:

git init
Enter fullscreen mode Exit fullscreen mode

I verified the files using:

git status
Enter fullscreen mode Exit fullscreen mode

📌 Step 5: Add and Commit Files

I added all files and created the first commit:

git add .
git commit -m "Initial commit: AWS S3 video hosting"
Enter fullscreen mode Exit fullscreen mode

🧑‍💻 Step 6: Push Project to GitHub

  1. Created a new repository on GitHub: 
   s3-video-hosting
Enter fullscreen mode Exit fullscreen mode
  1. Connected the local repository to GitHub: 
   git branch -M main
   git remote add origin https://github.com/YOUR_USERNAME/s3-video-hosting.git
   git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Now the project is live on GitHub 🎉

📄 README.md Content 

# AWS S3 Video Hosting

This project demonstrates how to host and stream a video using AWS S3.

## Features
- Public video hosting via S3
- HTML video playback
- GitHub version control

## Tools
- AWS S3
- HTML
- Git & GitHub
Enter fullscreen mode Exit fullscreen mode

🧠 Key Learnings

  • Public access in S3 must be carefully configured
  • Git errors are often simple syntax issues
  • Organizing projects in a dedicated workspace avoids permission problems
  • Documentation is as important as implementation

🚀 Final Thoughts

This project helped me understand how AWS S3 can be used for simple content hosting and how GitHub can be used to document and showcase learning projects.

If you’re new to AWS or Git, this is a great beginner project to start with.

Top comments (0)