Repository with base samples for playing HLS/DASH with CMAF video, across as many platforms as possible. Includes steps for encoding and packaging your own test content.

Overview

Video Everything

Repository with minimal samples for playing HLS/DASH with CMAF video, across as many platforms as possible.

Content and License

All test content in this repository was derived from the Netflix Open Source Content Platform which is licensed under the Creative Commons Attribution 4.0 International Public License

Currently the following titles exist as test media:

If you would like to follow along and encode your own piece of test content, refer to the Content Preparation section below.

Setup

Ensure you have:

  • Node/NPM
  • Web Browsers
  • Android Studio
  • Xcode

Optional things:

  • Physical devices

Hosting Content

You can point the samples at any content, but to get things off the ground this repo contains a sample encoded HLS/DASH with CMAF playlist with a two bitrate variations located in the .content directory.

Before moving on to each platform, pop into that directory and run:

npm install
npm start

Samples

Web, Mobile Web

Inside of the /web directory:

npm install
npm start

Then navigate to the individual pages. Note that the html5 sample will only work in Safari, or any browser that natively supports HLS and fMP4 (Fragmented MP4).

Samples available:

Android, Android TV, FireTV

Inside of the /android and /androidtv-firetv directories respectively, open Android Studio to the root build.gradle files. Build and run the apps on your device of choice.

Samples available:

iOS, tvOS, macOS

Inside of the /ios-tvos-macos directory, open Xcode to the project files. Build and run the apps on your device of choice, across the build targets.

Samples available:

Roku

Inside of the /roku directory:

npm install
npm run build

There will be build generated here: ./out/roku.zip

To view on a Roku device, make sure your Roku is in developer mode and install the application by uploading the generated zip file to the Development Application Installer screen.

Note: the Roku device must be on the same network as the server hosting the content. The build command assumes your are hosting the content on the machine you are building on.

Tizen

TODO

WebOS

TODO

Chromecast

TODO

PlayStation

TODO

XBox

TODO

OTT

TODO

Content Preparation

If you would like to prepare and use your own piece of media, the following section will walk you through the steps to properly encode and package sample content which can be played using the samples configured in this repo. Once packaged the content can be placed in the .content/public directory.

For the sample content included in this repo the following transmuxing, transcoding, and packaging steps were performed.

Content Download

To start, download the full Sol Levante 35GB HDR10 2020 ST2084 UHD source media file from the Netflix Open Source Content Platform above.

Content Re-Mux for Size Reduction

To work with a file of this size it's easier if we trim it down right from the start. We'll use a combination of ffmpeg and bento4 throughout this process, but any media tools with sufficient spec compliance and codec support will do.

First we'll trim the video down to a 15 second section:

ffmpeg -i SolLevante_HDR10_r2020_ST2084_UHD_24fps_1000nit.mov \
  -ss 00:00:30 -to 00:00:45 \
  -c:v copy -c:a copy \
  sollevante.mov

Content Transcode/Transmux

Now we'll transcode/transmux the .mov QuickTime file to h.264 AAC:

ffmpeg -i sollevante.mov \
  -vcodec h264 -acodec aac \
  sollevante.mp4

Content Renditions

Next we'll generate a 360p and 480p rendition of the new source content, using the Shaka Media Packager demo settings. These account for the correct GOP (Group of Pictures) alignment and bitrate settings.

# 360p

ffmpeg -i sollevante-main.mp4 -c:a copy \
  -vf "scale=-2:360" \
  -c:v libx264 -profile:v baseline -level:v 3.0 \
  -x264-params scenecut=0:open_gop=0:min-keyint=72:keyint=72 \
  -minrate 600k -maxrate 600k -bufsize 600k -b:v 600k \
  -y sollevante_360p_600.mp4

# 480p

ffmpeg -i sollevante-main.mp4 -c:a copy \
  -vf "scale=-2:480" \
  -c:v libx264 -profile:v main -level:v 3.1 \
  -x264-params scenecut=0:open_gop=0:min-keyint=72:keyint=72 \
  -minrate 1000k -maxrate 1000k -bufsize 1000k -b:v 1000k \
  -y sollevante_480p_1000.mp4

Content to Fragmented MP4s (fMP4s)

At this point we have two renditions of h.264 AAC mp4 content. In order to package this as CMAF we'll need to first transcode the content so it's fragmented. Internally this is just converting the actual sections of media data (mdat) into consistently sized boxes, which in this case we'll make 3s to align with CMAF spec recommendations for compatibility between HLS and DASH.

To do the final steps we'll use bento4. This packaging libraries requires the input renditions to be packaged are first fragmented:

bento4/bin/mp4fragment ./sollevante_360p_600.mp4 sollevante_360p_600_fragment.mp4
bbento4/bin/mp4fragment ./sollevante_480p_1000.mp4 sollevante_480p_1000_fragment.mp4

Content Packaging

At this point we can wrap up our two fragmented renditions and host them under our .content directory:

./bento4/bin/mp4dash --hls \
  sollevante_360p_600_fragment.mp4 \
  sollevante_480p_1000_fragment.mp4

This produces a content directory in the same structure as provided under the .content/sol-levante section.

Content Profile Downgrade

Right now the content profile is encoded as High, and ffmpeg was complaining about the inability to transcode the source media which already encoded with a high profile. If you need to tweak the profile you can use the following snippet:

ffmpeg -i sollevante.mp4 \
  -vf "scale=2*trunc(iw/2):-2,setsar=1" \
  -profile:v main -pix_fmt yuv420p \
  sollevante-main.mp4
You might also like...
High-performance and flexible video editing and effects framework, based on AVFoundation and Metal.
High-performance and flexible video editing and effects framework, based on AVFoundation and Metal.

High-performance and flexible video editing and effects framework, based on AVFoundation and Metal.

Yattee: video player for Invidious and Piped built for iOS 15, tvOS 15 and macOS Monterey
Yattee: video player for Invidious and Piped built for iOS 15, tvOS 15 and macOS Monterey

Video player with support for Invidious and Piped instances built for iOS 15, tvOS 15 and macOS Monterey.

Yattee: video player for Invidious and Piped built for iOS, tvOS and macOS
Yattee: video player for Invidious and Piped built for iOS, tvOS and macOS

Video player for Invidious and Piped instances built for iOS, tvOS and macOS. Features Native user interface built with SwiftUI Multiple instances and

A video composition framework build on top of AVFoundation. It's simple to use and easy to extend.
A video composition framework build on top of AVFoundation. It's simple to use and easy to extend.

A high-level video composition framework build on top of AVFoundation. It's simple to use and easy to extend. Use it and make life easier if you are implementing video composition feature.

▶️ video player in Swift, simple way to play and stream media on iOS/tvOS

Player Player is a simple iOS video player library written in Swift. Looking for an obj-c video player? Check out PBJVideoPlayer (obj-c). Looking for

A set of tools to trim, crop and select frames inside a video

PryntTrimmerView A set of tools written in swift to crop and trim videos. Example To run the example project, clone the repo, and run pod install from

📽 A video player for SwiftUI, support for caching, preload and custom control view.
📽 A video player for SwiftUI, support for caching, preload and custom control view.

Features QuickStart Advances Installation Requirements License Demo Clone or download the project. In the terminal, run swift package resolve. Open Vi

Swift Package used for video where I demonstrate how to extract a package to a local framework and modify it.
Swift Package used for video where I demonstrate how to extract a package to a local framework and modify it.

SegmentedPicker NOTE: This sample code is taken from the article by Frank Jia in his article titled Build a Custom iOS Segmented Control With SwiftUI

iOS video player for trailer. You can customize layout for the control panel. Support PiP and DRM.

iOS video player for trailer. You can customize layout for the control panel. Support PiP and DRM.

Owner
Alex Dodge
Library developer and educator with a focus on client-side video
Alex Dodge
Camera and Microphone streaming library via RTMP, HLS for iOS, macOS, tvOS.

HaishinKit (formerly lf) Camera and Microphone streaming library via RTMP, HLS for iOS, macOS, tvOS. Issuesの言語は、日本語が分かる方は日本語でお願いします! Sponsored with ??

shogo4405 2.4k Nov 18, 2022
JDVideoKit - You can easily transfer your video into Three common video type.

JDVideoKit Introduction You can easily transfer your video into Three common video type. You can use set up camera easily. Installation pod 'JDVideoK

郭介騵 24 Sep 9, 2021
Dedicated storyboarding iPad app for video content creators.

CS3217 - Storyteller Final Project for CS3217: Software Engineering for Modern Application Platforms By: Marcus, Pan Yongjing, and Tian Fang Overview

Marcus Ng 0 Nov 29, 2021
Integrate Pianobar with the Now Playing feature of macOS

PianobarNowPlayable - Integrate Pianobar with the Now Playing feature of macOS Ever wanted to control Pianobar like you do most other music applicatio

Dominic 4 Aug 30, 2022
Video mp4 record save display - How to Take , Save and Display a .mp4 Video

Technicalisto How to Take , Save and Display a .mp4 Video Add your design with v

Aya Baghdadi 2 Aug 7, 2022
An alternative to SwiftUI's VideoPlayer that includes an overlay button that will transition the player to be presented full screen.

The VideoPlayer provided by SwiftUI out of the box is great but it's missing one very important feature: full screen presentation mode. AZVideoPlayer behaves pretty much exactly like VideoPlayer, but adds the button that's provided by AVPlayerViewController to go full screen.

Adam Zarn 4 Nov 16, 2022
A Swift library to upload video files to api.video platform.

api.video IOS video uploader api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and manag

api.video 7 Jan 10, 2022
api.video is the video infrastructure for product builders

api.video is the video infrastructure for product builders. Lightning fast video APIs for integrating, scaling, and managing on-demand & low latency live streaming features in your app.

api.video 4 Jun 27, 2022
Anime4K for Apple platforms based on Metal

Anime4KMetal Introduction This is a port of Anime4K to Metal. It dynamically translates GLSL shaders to Metal shaders and applies them during video pl

Yi Xie 18 Nov 22, 2022
Offline playback of a fireplace video on your Apple TV

Fireplace Offline playback of a fireplace video on your Apple TV Screenshots Bring Your Own Video For copyright reasons the file fire.mp4 is not inclu

Günther Eberl 1 Dec 12, 2021