Skip to main content
Version: 8.6.1

How to use MultiView

This article will go over how to work with THEOplayer's MultiViewPlayer. As the setup is very similar to using normal THEOplayer, we strongly recommend reading the getting started documentation for web first.

SDKs

Web SDKAndroid SDKiOS SDKtvOS SDKAndroid TV SDKChromecast SDK
YesNoNoNoNoNo

Prerequisites

1. Your THEOplayer SDK needs to have the 'multiview' feature enabled.

You can quickly check using THEOplayer.features. The feature is only available from THEOplayer 4.3 and onwards. This feature is included by default in the @theoplayer/extended npm package.

2. You need to have a THEOplayer license which is compatible with MultiView

This can be done through https://portal.theoplayer.com.

Basic setup

To make a MultiViewPlayer, one has to add the following code to their page:

<div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>
<script src="/path/to/THEOplayer.js"></script>
<script>
var element = document.querySelector('.theoplayer-container'); // fetch THEOplayer container div

var player = new THEOplayer.MultiViewPlayer(element, {
// instantiates the MultiView player
libraryLocation: '/path/to/your-theoplayer-folder/', // references folder containing your THEOplayer library files (THEOplayer.js, ...)
license: 'your_license_string', // references your THEOplayer SDK license
});
</script>

Now that the MultiViewPlayer is instantiated, you'll need to load each view separately:

player.load('Label', {
sources: [
{
src: '//cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8', // sets HLS source
type: 'application/x-mpegurl', // sets type to HLS
},
],
});

The MultiViewPlayer has a slightly different API from the general THEOplayer, so for more information we refer to the documentation.