Setup Adaptive Bitrate Streaming with DASH and HLS

Bitmovin encodes your videos into modern Adaptive Bitrate Streaming formats such as MPEG-DASH and HLS. These cutting edge adaptive streaming formats enable smooth playback without buffering and low startup delay at the highest possible quality. Your input videos can be transfered to our cloud encoding service through various input protocols such as HTTP or FTP servers, Google Cloud Storage, Amazon S3, Microsoft Azure, Aspera.

The encoded adaptive bitrate streaming files can then be transferred to your distribution servers, such as FTP servers, Google Cloud Storage, Amazon S3, Azure Blob Storage or to CDNs directly.

Adaptive Bitrate Encoding Workflow

The general workflow is a follows: Your input videos can be encoded with Bitmovin into MPEG-DASH and HLS formats used for streaming. Bitmovin transfers the encoded asset back to your storage. From this storage you can directly deliver your videos to your customers.

Adaptive bitrate streaming encoding workflow

Step by Step Guide

Login or Sign Up

If you already have an account just go to our login page and login. If not you can sign up for free at our sign up page. The bitmovin free plan contains 5000 free impressions for our player and 2.5 GB of free output for our encoding.

sign-up

Select Input Video

Once you are logged in, you see the create encoding page. Just select our “Sample-Input-Video.mkv” and hit the continue button to proceed to the encoding options.

input

Select Encoding Profile

The next step is to select the video and audio encoding qualities for you encoding. For now we just select one of the predefined encoding profiles, e.g., “FullHD-1080p Adaptive Bitrate” and hit the continue button.

select-encoding-profile

Select Adaptive Streaming Formats

At this point you can select different adaptive streaming formats, such as MPEG-DASH and/or HLS. bitmovin encodes your content in a way that it plays on any type of device, ranging from smartphones and tablets to web browsers and TV-sets. Now everything is set and you are ready to start the encoding job.

formats

Start Encoding

Just review your encoding settings and hit the start encoding button.

start-encoding

Encoding

Your encoding should finish in just a few minutes and you can take a look at the output directly in the bitmovin web interface.

encoding

Create Output

The next step would be to create an output for your output location (e.g., Amazon S3). You can select which bucket you want to use, as well as the folder (prefix) and whether you want to have this content public or not. Here you can see an example.

output

Transfer the Video to your Output

Now you need to go back to your encoding and select the transfer tab on the top. The next step is that you select your already created output and just hit the start transfer button. Your encoded video will now be transferred to your output including all qualities (representations/renditions) as well as metadata, e.g., MPDs and M3U8s.

transfer

API Example

The same steps can be achieved through our API or with one of our API clients with a few lines of code, e.g. PHP:

PHP Example Code

 


/* CONFIGURATION */
Bitcodin::setApiToken('insertYourApiKey');

$inputConfig = new HttpInputConfig();
$inputConfig->url = "http://eu-storage.bitcodin.com/inputs/Sample-Input-Video.mkv";
$input = Input::create($inputConfig);

/* CREATE OUTPUT CONFIG  */
$outputConfig = new S3OutputConfig();
$outputConfig->name         = "TestS3Output";
$outputConfig->accessKey    = "YourAWSAccessKey";
$outputConfig->secretKey    = "YourAWSSecretKey";
$outputConfig->bucket       = "YourBucketName";
$outputConfig->region       = AwsRegion::EU_WEST_1;
$outputConfig->prefix       = "path/to/your/outputDirectory";
$outputConfig->makePublic   = false;

$output = Output::create($outputConfig);

$encodingProfileConfig = new EncodingProfileConfig();
$encodingProfileConfig->name = 'MyApiTestEncodingProfile';

/* CREATE VIDEO STREAM CONFIGS */
$videoStreamConfig1 = new VideoStreamConfig();
$videoStreamConfig1->bitrate = 4800000;
$videoStreamConfig1->height = 1080;
$videoStreamConfig1->width = 1920;
$encodingProfileConfig->videoStreamConfigs[] = $videoStreamConfig1;

$videoStreamConfig2 = new VideoStreamConfig();
$videoStreamConfig2->bitrate = 2400000;
$videoStreamConfig2->height = 720;
$videoStreamConfig2->width = 1280;
$encodingProfileConfig->videoStreamConfigs[] = $videoStreamConfig2;

$videoStreamConfig3 = new VideoStreamConfig();
$videoStreamConfig3->bitrate = 1200000;
$videoStreamConfig3->height = 480;
$videoStreamConfig3->width = 854;
$encodingProfileConfig->videoStreamConfigs[] = $videoStreamConfig3;

/* CREATE AUDIO STREAM CONFIGS */
$audioStreamConfig = new AudioStreamConfig();
$audioStreamConfig->bitrate = 128000;
$encodingProfileConfig->audioStreamConfigs[] = $audioStreamConfig;

/* CREATE ENCODING PROFILE */
$encodingProfile = EncodingProfile::create($encodingProfileConfig);

$jobConfig = new JobConfig();
$jobConfig->encodingProfile = $encodingProfile;
$jobConfig->input = $input;
$jobConfig->output = $output;
$jobConfig->manifestTypes[] = ManifestTypes::M3U8;
$jobConfig->manifestTypes[] = ManifestTypes::MPD;

/* CREATE JOB */
$job = Job::create($jobConfig);

/* WAIT TIL JOB IS FINISHED */
do{
    $job->update();
    sleep(1);
} while($job->status != Job::STATUS_FINISHED && $job->status != Job::STATUS_ERROR);

 

Enable CORS and crossdomain.xml

The next step is that you enable CORS on your origin, which allows streaming through HTML5 and also add a crossdomain.xml to enable Flash based streaming. If you want to know more why this is important you can take a look at the following CORS and Crossdomain.xml blog post.

Setup your Adaptive Streaming Player

To playback your content you can easily embed our player. All needed information, as well as the player itself, can be found in the player overview tab.

setup-player

Beneath your personal player key, all relevant information and documentation will be provided on this overview page. Furthermore, you can specify the domains you want to use with the player, via the “Add New Domain(s)” functionality, seen in the screenshot below.

Prepare a Sample Page

Next step is to download a preconfigured sample page, which demonstrates the player setup. This can be done, by using the download code button in the embed tab, like shown in the below image.

sample-page

To configure the player you simply have to change the player config object (lines 102-104 within the sample page). Just replace the values for dash, hls, progressive and poster (not needed entries can be deleted) pointing to the location of the MPD and M3U8 of your output.


source: {
  dash: '//path/to/your/dash-manifest.mpd',
  hls: '//path/to/your/hls-playlist.m3u8'
}

Publish

Last step is to upload your sample page to your webserver. Once you open the page, you will see your video playing with low startup-delay, no buffering and in the best possible quality!

Back to Top
Simple Share Buttons