https://github.com/timfuhrmann/streaming-platform

A small video streaming platform built with Next.js using a custom video player, providing one streaming example following the HLS protocol.
https://github.com/timfuhrmann/streaming-platform

hls http nextjs react redux sass seo typescript

Last synced: 4 months ago
JSON representation

A small video streaming platform built with Next.js using a custom video player, providing one streaming example following the HLS protocol.

• Host: GitHub
• URL: https://github.com/timfuhrmann/streaming-platform
• Owner: timfuhrmann
• Created: 2021-06-13T14:25:27.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-08-21T16:22:49.000Z (10 months ago)
• Last Synced: 2025-02-11T04:08:22.433Z (4 months ago)
• Topics: hls, http, nextjs, react, redux, sass, seo, typescript
• Language: TypeScript
• Homepage: https://streaming-platform-tmdb.vercel.app/
• Size: 3.62 MB
• Stars: 116
• Watchers: 2
• Forks: 27
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
**Last Update: 01.11.2022**

A video streaming demo platform built with Next.js, inspired by Netflix, using a custom video player and providing a streaming example following the HLS protocol.

https://streaming-platform-tmdb.vercel.app/

![Preview](public/preview-popup.png)

## Frontend

- React.js

- Next.js

- Typescript

- Styled Components

- Redux

- Hls.js

**Image optimization is disabled due to Fair Use Policy.**

## Known issues

1. Player isn't properly reset - Solution: Move player store to watch route

## API

The following api is being utilized: https://developers.themoviedb.org/3/getting-started/introduction

## Next.js

### Middleware & Edge Functions

Whether or not a profile has been selected is being checked on the edge at the speed of static to handle a possible redirect.

## Custom Media Player

The application uses its own custom media player. Because of missing resources audio and subtitle selection are not included.

![Media Player](public/preview-player.png)

## Getting Started

Make sure to copy paste the `.env.public` contents to your local dotenv file and fill in the missing fields.

Then, run the development server:

```bash

npm run dev

# or

yarn dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.