VR and 360° Video from Encoding to Playout

Looking for a HTML5 360 video player?

With the latest release of our player, Bitmovin introduces adaptive VR and immersive 360° video streaming in HTML5! From encoding to playout, Bitmovin’s adaptive video streaming service enables you to create an immersive experience, which adds significant value to your video streaming application.

VR & 360° Video and Adaptive Bitrate Streaming

Since Google introduced Cardboard, which enabled an immersive experience for everyone, news articles and announcements pertaining to VR and 360° video have increased sharply. Today, nearly every major player in the video streaming industry has made its first steps into the VR arena. It’s highly likely that VR will soon find its way in our daily life, along with devices like Samsung Gear VR and Oculus Rift.

Although gaming and entertainment are what comes to most people’s minds when discussing VR, use cases extend far beyond this segment. Completely different scenarios, such as virtual workspaces or illustrations in context of engineering and manufacturing, are within reach in the very near future. However, all of these applications do share one big difficulty – the need do get huge amounts of data to display the video. Usually VR or immersive video scenarios provide a full 360° reflection of the real (or an artificial) world, which needs incomparable higher resolutions in contrast to traditional video, if the same quality level is to be maintained. If one thinks of progressive download, or traditional – non adaptive – video streaming, in this context, very high bandwidth connections will be needed to ensure low startup delay and no buffering.

To overcome this issue and ensure highest video quality, with minimal startup time and no buffering, adaptive streaming technologies like MPEG-DASH are a perfect fit, and enable seamless streaming of VR and 360° content. This video streaming technique allows the video player on the client device to dynamically adapt the video bitrate (quality) to the bandwidth situation of the user. Thus, the video starts faster, buffering during the streaming session is prevented, and a higher quality viewing experience is delivered.

adaptive streaming graph VR

The upcoming paragraphs are a step-by-step guide for how to embed VR and 360° video in your application, using Bitmovin’s adaptive streaming service.

Encode your Assets using our Cloud-based Encoding Service

To get started, just sign up for free at our web portal. MPEG-DASH VR encoding with Bitmovin’s encoding service is very simple and supported via our web interface, as well as our REST-API and with our API Clients. Basically one just has to configure the appropriate quality levels needed for VR content, which is easy using our predefined Encoding Profiles. Currently MPEG DASH VR is supported within all plans and for all of our users.

VR thumbnail

Once you have successfully logged in, select ENCODINGS/Create Encoding from the left menu and add your own input video in the ‘Add Input’ tap. To create the best experience, we recommend using flat 360° input videos, like shown in the screenshot above. The video used in this tutorial can be downloaded here.

As already mentioned, resolutions are usually higher for VR or 360° videos. This fact must also be taken into consideration for the encoding process. Therefore, we suggest to adding additional representations, with higher resolution and bitrates, to your encoding profile. A possible configuration for a 2k input video, might look like this:

html5 360 video player control panel

As you can see, we used four different representations from 1.0Mbps to 9Mbps. However, you can easily add additional and as many representations as needed, by clicking the ‘Add Representation’ button, indicated on the below figure. The number and quality of your representations also depend on your use case and the content source you are using. The configuration within this example shows a good starting point for most scenarios and inputs.

add VR representation

Once the encoding is finished you’ll be able to see a preview of the stream. By clicking on “Download” or “Transfer”, you can get the files and host them yourself or transfer them to one of the encoding outputs you defined beforehand (cloud storage, FTP server…).

copy VR MPD - html5 360 video player - account

Setup and Configuration of the html5 360 Video Player

Now, it’s time to prepare the player and point it to the proper video stream. The Bitmovin adaptive streaming player utilizes the browser build-in HTML5 Media Source Extensions (MSE) to playback VR and omnidirectional content natively through the browser decoding engine. This playout technique is available on most modern web browsers. More information about browser coverage can be found in our support section.

VR player overview

To get an overview of all relevant information in context of the player, click on the player overview menu item. As you can see in the above screenshot, the overview shows your personal player key, the CDN path of the player files and how many impressions have already been generated this month. You can use our fully featured html5 360 video player for free when used for 5,000 (or less) impressions per month. For testing and evaluation purposes, video views on localhost does not increase the impressions count. You can also use the player on multiple domains, just add them to the list of approved domains. To add a domain, enter the domain name and click the ‘Add new Domain(s)’ button, as indicated in the figure below.


add domain

In the ‘Embed’ tab of the player part, you can download a prepared code snippet, that can be used for embedding a basic configuration of the player in an existing page.
Bitmovin Player is configured through a “configuration” object containing several sections (the Key, sources…).
You have to customize the configuration object to adapt the player to your specific usecase. Then you will be able to point the player to the right stream according to the source part of the configuration object, schedule some ads or setup the player for 360° viewing.
One of the basic configurations that enables VR might look as bellow:

var conf = {
    key:    'YOUR-KEY-HERE',
    source: {
      dash: '//PATH/TO/THE/MANIFEST-FILE.mpd',
      vr: {
        contentType :    'single'

In order to enable the VR, you have to edit the “vr” attribute of this object

Configuring the “vr” section for a 360 use case

contentType :

It describes your 360 video format

  • Single: significates that your video will have a slice that covers all the horizontal directions but not the top and the bottom
  • VR thumbnail

  • tab: it is used for “Top and Bottom” videos that cover all the directions (horizontal and vertical, top and bottom)
  • adaptive streaming graph VR

  • sbs :this is the option for side by side videos, used in the context of a VR headset for instance.
  • adaptive streaming graph VR


    It defines a spatial horizontal offset (angle) in degree for the first view-port displayed.

    adaptive streaming graph VR


    The Boolean parameter called “stereo” specifies if the video should start in the stereo mode or not.

    vr: {


    It is possible to make the viewport rotate horizontally when the playback begins.
    In order to activate this feature, it is necessary to activate the “initialRotation” and specify a rate.
    The rotation will be disabled if the user changes his viewport

    Example of vr attribute that enables a constant rotation in the configuration object

    vr: {
      startPosition :    0,
      contentType :     'single',
      initialRotation : 'true',
      initialRotateRate :0.25


    In order to explore the possibilities in terms of VR, we can set up an example that includes most of the parameters

    var conf = {
      key: ‘YOUR KEY HERE’,
      source: {
        dash: '//bitmovin-a.akamaihd.net/content/playhouse-vr/mpds/105560.mpd',
        poster: '//bitmovin.com/public-demos/vr-demo/content/poster.jpg'
        vr: {
          startPosition: 0,
          contentType: 'single',
          initialRotation : 'true',
      style: {
        aspectratio: '2:1'

    The player offers support for different content types, namely ‘single’ for simple 2D content, ‘tab’ for 3D top and bottom, and ‘sbs’ for 3D side by side content. In addition, stereo and non-stereo mode are supported and the user can toggle between these two modes using the cardboard icon in the controls or via API. In the case of mobile, the built-in sensors can be used to navigate (look around). On desktop devices, keyboard controls (i.e. a,w,s,d), or the usage of a mouse is possible. In combination with VR devices like the Oculus system, head tracking can be used as well, if supported in the browser (e.g. in FireFox Nightly with VR plugin).

    You can see everything working in our new 360° and VR demo.


    Using Bitmovin’s Adaptive Video Streaming Services, you can make use of VR and 360° video – the future of video and multimedia. The availability of new, awesome VR/360° content is exploding at the moment, and this growth will continue to accelerate. Once new camera technologies – such as light field – and the associated product workflows and codecs are available, even more incredible experiences will be possible, so stay tuned!

    Find out more about our html5 360 video player on our product pages.

    Back to Top
    Simple Share Buttons