Giter Club home page Giter Club logo

alpine-dash-hls's Introduction

| |

Alpine Dash HLS - Simple Stream Videos

A ready-prepared video transcoding pipeline to create DASH/ HLS compatible video files & playlists.

Recommended usage via Docker Kitematic & Docker Hub.

Simplified usage (run in shell/ terminal/ cmd)

Prerequisite: Docker needs to be installed and running.

docker pull majamee/alpine-dash-hls
docker run -v /absolute/path/to/video/:/video majamee/alpine-dash-hls name_of_my_video_file.ext

Please just replace in the command above the absolute path to your video file folder and the full file name of your video file to be converted. You can also use tags like majamee/alpine-dash-hls:edge (e.g. uses alpine's edge version as base).

Examplary toolchain usage

(Based on work of squidpickles)

Just use Kitematic to open the shared folder, place your video file in there, replace "input.mkv" in the commands below by your input video file (without "") and execute the shell commands subsequent into the Docker container.

# 1080p@CRF22
ffmpeg -y -threads 0 -i "input.mkv" -an -c:v libx264 -x264opts 'keyint=24:min-keyint=24:no-scenecut' -profile:v high -level 4.0 -vf "scale=min'(1920,iw)':-4" -crf 22 -movflags faststart -write_tmcd 0 intermed_1080p.mp4
# 720p@CRF22
ffmpeg -y -threads 0 -i "input.mkv" -an -c:v libx264 -x264opts 'keyint=24:min-keyint=24:no-scenecut' -profile:v high -level 4.0 -vf "scale=min'(1280,iw)':-4" -crf 22 -movflags faststart -write_tmcd 0 intermed_720p.mp4
# 480p@CRF22
ffmpeg -y -threads 0 -i "input.mkv" -an -c:v libx264 -x264opts 'keyint=24:min-keyint=24:no-scenecut' -profile:v high -level 4.0 -vf "scale=min'(720,iw)':-4" -crf 22 -movflags faststart -write_tmcd 0 intermed_480p.mp4
# 128k AAC audio only
ffmpeg -y -threads 0 -i "input.mkv" -vn -c:a aac -b:a 128k audio_128k.m4a

# Create MPEG-DASH files (segments & mpd-playlist)
MP4Box -dash 2000 -rap -frag-rap -url-template -dash-profile onDemand -segment-name 'segment_$RepresentationID$' -out playlist.mpd intermed_1080p.mp4 intermed_720p.mp4 intermed_480p.mp4 audio_128k.m4a

# Create HLS playlists for each quality level
ffmpeg -y -threads 0 -i intermed_1080p.mp4 -i audio_128k.m4a -map 0:v:0 -map 1:a:0 -shortest -acodec copy -vcodec copy -hls_time 2 -hls_list_size 0 -hls_flags single_file segment_1.m3u8
ffmpeg -y -threads 0 -i intermed_720p.mp4 -i audio_128k.m4a -map 0:v:0 -map 1:a:0 -shortest -acodec copy -vcodec copy -hls_time 2 -hls_list_size 0 -hls_flags single_file segment_2.m3u8
ffmpeg -y -threads 0 -i intermed_480p.mp4 -i audio_128k.m4a -map 0:v:0 -map 1:a:0 -shortest -acodec copy -vcodec copy -hls_time 2 -hls_list_size 0 -hls_flags single_file segment_3.m3u8
ffmpeg -y -threads 0 -i audio_128k.m4a -acodec copy -vcodec copy -hls_time 2 -hls_list_size 0 -hls_flags single_file segment_4.m3u8

# Transform MPD-Master-Playlist to M3U8-Master-Playlist
xsltproc --stringparam run_id "segment" /app/mpd-to-m3u8/mpd_to_hls.xsl playlist.mpd > playlist.m3u8

I am glad to receive any improvement ideas about this "any video to DASH/ HLS" pipeline. Especially if someone has any input on integrating better Apple's support of fragemented mp4 (fmp4) files in this pipeline.

Suggestions welcome. :)

General hints for hosting the files (to test streaming)

  • Video and playlist files should be hosted best via HTTPS
  • DASH requires the .mpd playlist to be set as Content-Type: application/dash+xml
  • No specific streaming server is required, but your hosting should have progressive downloading enabled
  • If using a different domain name for the video files compared to the page where the player is hosted CORS headers need to be set

Tools to test the generated files for streaming

Features

  • Supported devices: iOS (Chrome/ Firefox/ Safari), Android (Chrome/ Firefox), Mac (Chrome/ Firefox/ Safari), Windows (Chrome/ Firefox/ EDGE)
  • Creates DASH (VOD) compatible files (including Safari on Mac)
  • Creates HLS files for compatibility with Safari on iOS
  • Optimizes video files for web playback (moov atom)
  • Compresses videos using H.264@CRF22 (for best compatibility)
  • Compresses audio using AAC@128k (for DASH as separate track to save data)
  • Creates automatically 3 quality levels (Full HD/ HD/ DVD quality)
  • Fragments video files in 2 second windows to allow dynamic quality switching based on available bandwidth
  • Creates master MPD-Playlist which connects everything (MPEG-DASH)
  • Creates master M3U8-Playlist for HLS
  • Creates all output files neatly stored in a sub-folder matching the video file name in the folder output next to the transcoded video file
  • Adds also HTML and .htaccess file including code ready for inclusion into the own website for playback next to all other created files
  • Generates and sets Poster image (from second 3 of the input video file)
  • Generates and includes video preview thumbnails (currently only natively supported by Fluid Player via WebVTT)
  • Video preview support thumbnail support added for Video.js via videojs-vtt-thumbnails
  • Included fallback player (fluid-player.html) is based on the great work of the devs at Fluid Player
  • Included second fallback player (plyr.html) is based on the great work of the devs at Plyr
  • Included third fallback player (videogular.html) is based on the great work of the devs at Videogular
  • Included player (index.html) is based on the great work of the guys at Video.js

Tip

For creating DASH/ HLS compatible files for multiple videos in a single run, please have a look at:

Demo

https://alpine-dash-hls.gq/demos

alpine-dash-hls's People

Contributors

bardiir avatar majamee avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.