Skip to content

Try the video player 🎞️ that accepts videos in hls format (m3u8), with it you can watch streaming videos easily πŸ₯³!

Notifications You must be signed in to change notification settings

AntonioNarcilio/video-player-hls

Repository files navigation

preview

πŸš€ Technologies and tools used:

  • React.Js
  • Next.js
  • Typescript
  • Styled-components
  • Eslint
  • Lottie
  • Plyr
  • Hls.js

πŸ—‚ Project structure

.
β”œβ”€β”€ public
β”‚Β Β  β”œβ”€β”€ assets
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ poster.svg
β”‚Β Β  β”‚Β Β  └── preview.png
β”‚Β Β  β”œβ”€β”€ video
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 720p_000.mp4
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 720p_001.mp4
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 720p_002.mp4
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 720p_003.mp4
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 720p_004.mp4
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 720p_005.mp4
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 720p_006.mp4
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 720p_007.mp4
β”‚Β Β  β”‚Β Β  └── 720p.m3u8
β”‚Β Β  └── favicon.svg
β”œβ”€β”€ src
β”‚Β Β  β”œβ”€β”€ assets
β”‚Β Β  β”‚Β Β  └── animations
β”‚Β Β  β”‚Β Β      β”œβ”€β”€ 404-error.json
β”‚Β Β  β”‚Β Β      └── 500-error.json
β”‚Β Β  β”œβ”€β”€ components
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Head
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ Head.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  └── index.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ HotToast
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ HostToast.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  └── index.tsx
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ LottieAnimation
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ index.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ LottieAnimation.tsx
β”‚Β Β  β”‚Β Β  β”‚Β Β  └── styles.ts
β”‚Β Β  β”‚Β Β  └── Plyr
β”‚Β Β  β”‚Β Β      β”œβ”€β”€ index.ts
β”‚Β Β  β”‚Β Β      β”œβ”€β”€ Plyr.tsx
β”‚Β Β  β”‚Β Β      └── styles.ts
β”‚Β Β  β”œβ”€β”€ pages
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ api
β”‚Β Β  β”‚Β Β  β”‚Β Β  └── v1
β”‚Β Β  β”‚Β Β  β”‚Β Β      └── [slug].ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 404.tsx
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ 500.tsx
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ _app.tsx
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ _document.tsx
β”‚Β Β  β”‚Β Β  └── index.tsx
β”‚Β Β  β”œβ”€β”€ styles
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ pages
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ error
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”‚Β Β  β”œβ”€β”€ index.ts
β”‚Β Β  β”‚Β Β  β”‚Β Β  β”‚Β Β  └── styles.ts
β”‚Β Β  β”‚Β Β  β”‚Β Β  └── index
β”‚Β Β  β”‚Β Β  β”‚Β Β      └── styles.ts
β”‚Β Β  β”‚Β Β  β”œβ”€β”€ themes
β”‚Β Β  β”‚Β Β  β”‚Β Β  └── dark.ts
β”‚Β Β  β”‚Β Β  └── global.ts
β”‚Β Β  └── @types
β”‚Β Β      β”œβ”€β”€ env.config.d.ts
β”‚Β Β      β”œβ”€β”€ index.d.ts
β”‚Β Β      β”œβ”€β”€ lottie-animation.d.ts
β”‚Β Β      └── styled.d.ts
β”œβ”€β”€ next.config.js
β”œβ”€β”€ next-env.d.ts
β”œβ”€β”€ package.json
└── tsconfig.json

About

Try the video player 🎞️ that accepts videos in hls format (m3u8), with it you can watch streaming videos easily πŸ₯³!

Topics

Resources

Stars

Watchers

Forks