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 the ‘Copy MPD URL’ (as indicated in the below figure), the link to the manifest, gets copied to the clipboard. We will need this a little later on, for the player configuration.

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, and use this to embed the player in an existing page (or simply download a pre-configured sample page). Regardless of which option you prefer, the player configuration will be the same. To point the player to the right stream, the source part of the configuration object of the player has to be adapted. A possible configuration might look as follows:

  var conf = {
    key:    'YOUR-KEY-HERE',
    source: {
      dash: '//PATH/TO/THE/MANIFEST-FILE.mpd',
      vr: {
        contentType:  'single'
      }
    },
    style: {
      width:          '100%',
      aspectratio:    '16:9',
      controls:       true,
      mouse:          false
    }
  };

The key attribute takes the player license key from the player overview tab; the dash attributes the URL to the manifest file which was copied to the clipboard, when you finished your encoding. The additional vr attribute includes different VR related options, which are explained in more detail in our developer section. For the moment, we are only making use of the startupMode tag and will set it to off – the setting can be changed during runtime.

 

vrMode
 

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.

Conclusion

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