The following tutorial will show you how to perform an encoding with the Bitmovin API and setup multiple players to playback the encoded content.
The Bitmovin encoding platform can be used with a multitude of video players, including, but not limited to the Bitmovin Adaptive Streaming Player. This blog post will walk you through the end to end process to setup the Bitmovin encoding pipeline, furthermore, we describe how to configure and setup multiple video players to ingest the encoded output.
First, we will configure an encoding job using the Bitmovin platform to produce an HLS & DASH ABR output stream set. The platform will handle the entire workflow of ingesting the media source content, transcoding/packaging, and output transfer. Second, we will step through various video player configurations showing how to playback the encoded video bits.
Encoding Pipeline Setup
For the encoding, we will utilize the newest version of the Bitmovin API. We will use the PHP API Client and its example to show you how to create MPEG-DASH/HLS content. First, you will need to install the PHP Composer dependency manager.
Insert your API key to the Example
$client = new \Bitmovin\BitmovinClient('INSERT YOUR API KEY HERE');
The client is now ready to use. We can start preparing the configurations for your input source, output destination, and encoding, containing all the renditions (quality levels), you want to create.
For this example we are using an HTTP input path. The Bitmovin platform supports a multitude of storage providers and protocols (AWS S3, Google Cloud Storage, Microsoft Azure, Aspera, and (S)FTP).
$videoUrl = 'https://example.com/path/to/your/movie.mp4'; $input = new HttpInput($videoUrl);
Next we will want to configure the output destination. Output also supports multiple storage providers and protocols. For this example we are going to use AWS S3.
$s3AccessKey = 'INSERT YOUR S3 ACCESS KEY HERE'; $s3SecretKey = 'INSERT YOUR S3 SECRET KEY HERE'; $s3BucketName = 'INSERT YOUR S3 BUCKET NAME HERE'; $s3Prefix = 'path/to/your/output/destination/'; $s3Output = new S3Output($s3AccessKey, $s3SecretKey, $s3BucketName, $s3Prefix);
Next we will configure the encoding profile. This profile is where you configure the output streams, bitrates and resolutions. You can add as many video stream configurations as required by your typical encoding profile.
$encodingProfileConfig = new EncodingProfileConfig(); $encodingProfileConfig->name = 'Test Encoding FMP4'; $encodingProfileConfig->cloudRegion = CloudRegion::AWS_EU_WEST_1; // CREATE VIDEO STREAM CONFIG FOR 1080p $videoStreamConfig_1080 = new H264VideoStreamConfig(); $videoStreamConfig_1080->input = $input; $videoStreamConfig_1080->width = 1920; $videoStreamConfig_1080->height = 1080; $videoStreamConfig_1080->bitrate = 4800000; $encodingProfileConfig->videoStreamConfigs[] = $videoStreamConfig_1080; // CREATE VIDEO STREAM CONFIG FOR 720p $videoStreamConfig_720 = new H264VideoStreamConfig(); $videoStreamConfig_720->input = new HttpInput($videoInputPath); $videoStreamConfig_720->width = 1280; $videoStreamConfig_720->height = 720; $videoStreamConfig_720->bitrate = 2400000; $videoStreamConfig_720->rate = 25.0; $encodingProfileConfig->videoStreamConfigs[] = $videoStreamConfig_720; // MORE VIDEO STREAM CONFIGS ... $audioConfig = new AudioStreamConfig(); $audioConfig->input = $input; $audioConfig->position = 1; $audioConfig->bitrate = 128000; $audioConfig->name = 'English'; $audioConfig->lang = 'en'; $encodingProfileConfig->audioStreamConfigs[] = $audioConfig;
Now we will configure the output streaming protocol
For this example, we will configure HLS & DASH output. Bitmovin supports other streaming protocols such as fMP4 and MSS, etc.
// ENABLE DASH OUTPUT $jobConfig->outputFormat[] = new DashOutputFormat(); // ENABLE HLS OUTPUT $jobConfig->outputFormat[] = new HlsOutputFormat();
Start the encoding
// RUN JOB AND WAIT UNTIL IT HAS FINISHED $client->runJobAndWaitForCompletion($jobConfig);
After executing this example you will have two manifests, one for MPEG-DASH and one for HLS.
Video Player Setup
In this section, we will setup multiple video players to playback the encoded media from the Bitmovin platform. We will utilize the CDN-hosted versions of the players to lessen the load on our server and to have the most up to date version.
Bitmovin HTML5 Player
The Bitmovin team works to maintain the most technologically advanced video player currently on the market. The Bitmovin player also has the fastest load time compared to other online video players, along with the list below, you will also see that the Bitmovin player contains a deep stack of advanced features.
You can access the player analytics page and other player tutorials from inside of the Bitmovin portal. When you are ready to deploy the player to a domain, you will need to whitelist the hosted domain using the Bitmovin portal.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bitmovin V7 Player (DASH / HLS / MP4)</title> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fbitmovin-a.akamaihd.net%2Fbitmovin-player%2Fstable%2F7%2Fbitmovinplayer.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </head> <body> <div id="unique-player-id"></div> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20var%20player%20%3D%20bitmovin.player(%22unique-player-id%22)%3B%0A%20%20%20var%20conf%20%3D%20%7B%3Ca%20href%3D%22https%3A%2F%2Fbitmovin.com%2Fdashboard%2Fsignup%22%3E%3C%2Fa%3E%0A%20%20%20%20%20%20key%3A%20%22xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx%22%2C%0A%20%20%20%20%20%20source%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20dash%3A%20%22https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fyour%2Fdash-content-master-playlist.mpd%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20hls%3A%20%22https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fyour%2Fhls-content-master-playlist.m3u8%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20progressive%3A%20%22https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fyour%2Fcontent.mp4%22%0A%0A%20%20%20%20%20%20%7D%0A%20%20%20%7D%3B%0A%20%0A%20%20%20player.setup(conf).then(function%20(value)%20%7B%0A%20%20%20%20%20%20%20console.log(%22Successfully%20created%20bitmovin%20player%20instance%22)%3B%0A%20%20%20%7D%2C%20function%20(reason)%20%7B%0A%20%20%20%20%20%20%20console.log(%22Error%20while%20creating%20bitmovin%20player%20instance%22)%3B%0A%20%20%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> </body> </html>
This is a simple test page displaying the Bitmovin player. By default, the Bitmovin player supports playback of both HLS and DASH streams, along with progressive MP4 support. A demonstration of different configuration options can be found in our Player Configuration. The player supports Unlimited Customization as well as many advanced features.
Google’s Open Source Shaka Player
Next, let’s setup Google’s open source Shaka player. By default Shaka only plays back DASH streams. Shaka is considered a good reference player for a team wanting to build an internal player product, but currently, there is no commercial support available for the player.
<!DOCTYPE html>
<html>
<head>
<!-- Shaka Player compiled library: -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fshaka-player%2F2.0.3%2Fshaka-player.compiled.js%22%3E%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20function%20initPlayer()%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%20Install%20polyfills%20for%20legacy%20browser%20support.%0A%20%20%20%20%20%20%20%20shaka.polyfill.installAll()%3B%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Find%20the%20Shaka%20Player%20video%20element.%0A%20%20%20%20%20%20%20%20var%20video%20%3D%20document.getElementById('video')%3B%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Construct%20a%20Player%20to%20wrap%20around%20it.%0A%20%20%20%20%20%20%20%20var%20player%20%3D%20new%20shaka.Player(video)%3B%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Attach%20the%20player%20to%20the%20window%20so%20that%20it%20can%20be%20easily%20debugged.%0A%20%20%20%20%20%20%20%20window.player%20%3D%20player%3B%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Listen%20for%20errors%20from%20the%20Player.%0A%20%20%20%20%20%20%20%20player.addEventListener('error'%2C%20function(event)%20%7B%0A%20%20%20%20%20%20%20%20%20%20console.error(event)%3B%0A%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Construct%20a%20DashVideoSource%20to%20represent%20the%20DASH%20manifest.%0A%20%20%20%20%20%20%20%20var%20mpdUrl%20%3D%20'http%3A%2F%2Fexample.com%2Fdash-content%2Fmanifest.mpd'%3B%0A%0A%20%20%20%20%20%20%20%20%2F%2F%20Load%20the%20source%20into%20the%20Player.%0A%20%20%20%20%20%20%20%20player.load(mpdUrl)%3B%0A%20%20%20%20%7D%0A%20%20%20%20document.addEventListener('DOMContentLoaded'%2C%20initPlayer)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<video id="video" width="640" poster="//shaka-player-demo.appspot.com/assets/poster.jpg" controls autoplay></video>
</body>
</html>
DASH.JS Reference Rlayer
In this example, we will setup the DASH.JS reference player from the DASH-IF industry form. This player typically will support the latest MPEG-DASH features. The player is also a continually moving target, meaning that the new feature additions will sometimes cause player issues with previously working DASH streams.
You can access the DASH.JS GitHub repository at https://github.com/Dash-Industry-Forum/dash.js/.
<html>
<head>
<!-- DASH.JS include -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fcdn.dashjs.org%2Flatest%2Fdash.all.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<h1>DASH.JS</h1>
<div>
<video data-dashjs-player autoplay src="http://example.com/dash-content/manifest.mpd" controls></video>
</div>
</body>
</html>
JWPlayers Video Player
Next, we will setup media playback from the Bitmovin platform using another commercial video player. By signing up at https://www.jwplayer.com/, you will have access to the basic player functionality. Unlike Bitmovin’s player which gives you full access to all features, to enable adaptive bitrate streaming you will need to purchase at least the minimal premium version of the player from JW.
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22%2F%2Fcontent.jwplatform.com%2Flibraries%2FpY4X09ce.js%22%3E%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</head>
<body>
<h1>JWPlayer</h1>
<div id="myElement"></div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2FjavaScript%22%3E%0A%20%20%20%20%20%20%20%20%20%20var%20playerInstance%20%3D%20jwplayer(%22myElement%22)%3B%0A%20%20%20%20%20%20%20%20%20%20playerInstance.setup(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20file%3A%20%22%2Fplayer%2Fcontent2%2Fstream.mpd%22%20%7D)%3B%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</div>
</body>
</html>
HLS.JS Setup
HLS.JS is another popular open source player option. As HLS.JS is open source, there is no support options available. Like Shaka, HLS.JS is a good option if you are looking to develop an internal player. The setup process is easy, just like all of the other HTML5 video players. You can access the Github repository at https://github.com/dailymotion/hls.js/.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fhls.js%2Flatest%2Fhls.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<video id="video"></video>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20if(Hls.isSupported())%20%7B%0A%20%20%20%20var%20video%20%3D%20document.getElementById('video')%3B%0A%20%20%20%20var%20hls%20%3D%20new%20Hls()%3B%0A%20%20%20%20hls.loadSource('https%3A%2F%2Fexample.com%2Fpath%2Fto%2Fyour%2Fhls-content-master-playlist.m3u8')%3B%0A%20%20%20%20hls.attachMedia(video)%3B%0A%20%20%20%20hls.on(Hls.Events.MANIFEST_PARSED%2Cfunction()%20%7B%0A%20%20%20%20%20%20video.play()%3B%0A%20%20%7D)%3B%0A%20%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
What’s Next
You can create a free Bitmovin account for testing and creating your own online media experiences by signing up here.
We hope this article has given you an insight how to use the Bitmovin video platform for encoding and video playback. We also hope this has demonstrated that you can use the Bitmovin platform for encoding without disrupting your existing video player infrastructure. If you have any additional questions or would like to discuss next steps for integrating Bitmovin into your media pipeline please contact us here
