Adding multiple sources

We are able to add as many sources as we want to the player through the sources api. The default behaviour of sources api is to always have one active source and one video element.

const player = bitmovin.playerx.Player({
  key: 'YOUR-PLAYER-KEY',
  defaultContainer: document.getElementById("player-container")
});

const firstSourceConfig = {
  resources: [{
    url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/tos/m3u8/index.m3u8',
  }]
}

const secondSourceConfig = {
	resources: [{
		url: 'https://cdn.bitmovin.com/content/assets/streams-sample-video/sintel/m3u8/index.m3u8'
  }]
}

const firstSourceApi = player.sources.add(firstSourceConfig);
const secondSourceApi = player.sources.add(secondSourceConfig);
// At this point, the second source is the active one.

By default, as shown above, the active source will always be the one last added.

Adding multiple inactive sources

We can control if the source should be automatically attached by providing source options when adding the source. This options contains attach which can be boolean or AttachOptions.

const firstSourceApi = player.sources.add(firstSourceConfig);
const secondSourceApi = player.sources.add(secondSourceConfig, { attach: false });
const thirdSourceApi = player.sources.add(thirdSourceConfig, { attach: false });

Here we are able to define attach as false - meaning if it should not automatically attach the video element to the source. So second and third sources are not active ones - but are still downloading in the background. This can be controlled through LoadControl.

Adding multiple active sources

Besides passing attach as boolean, we are able to provide, where we can both provide video element and container where we would like to render it.

const myOtherVideoElement = document.getElementById('other-video-element')
const firstSourceApi = player.sources.add(firstSourceConfig);
const secondSourceApi = player.sources.add(
	secondSourceConfig, 
	{attach: { videoElement: myOtherVideoElement }}
);

In this case, both of the sources are active ones, and using their own video element. The first source using the default one, and the second source using the provided one.

We are also able to provide container to attach options, defining where the selected video element should be rendered.

const secondSourceApi = player.sources.add(
	secondSourceConfig, 
	{attach: { container: document.body }}
);

Getting all added sources

We are able to get all sources using sources.list method - this will give us back source apis back.

const loadedSources = player.sources.list();

Removing sources

To remove source, we can simply call sources.remove method and pass in the source api.

const firstSourceApi = player.sources.add(firstSourceConfig);

player.sources.remove(firstSourceApi);

Switching between active sources

We are able to switch between which source is using a video element by simply attaching it to the source.

const firstSourceApi = player.sources.add(firstSourceConfig);
const secondSourceApi = player.sources.add(secondSourceConfig, { attach: false });
const thirdSourceApi = player.sources.add(thirdSourceConfig, { attach: false });

player.sources.attachVideo(secondSourceApi);

At this point, second source is the one that has access to the video element. attachVideo also can receive attachOptions, where we can again explicitly pass in which video element we want this source to use.

const firstSourceApi = player.sources.add(firstSourceConfig);
const secondSourceApi = player.sources.add(secondSourceConfig, { attach: false });
const thirdSourceApi = player.sources.add(thirdSourceConfig, { attach: false });

const myOtherVideoElement = document.getElementById('other-video-element')

player.sources.attachVideo(secondSourceApi, {videoElement: myOtherVideoElement};                        )

This ensures we have multiple video elements active as well.

Detaching video element

We are able to remove video element from the source using source.detachVideo, which will remove video element from it. (Wether it is the default one or one explicitly passed in).

const firstSourceApi = player.sources.add(firstSourceConfig);
const secondSourceApi = player.sources.add(secondSourceConfig, { attach: false });
const thirdSourceApi = player.sources.add(thirdSourceConfig, { attach: false });

player.sources.detachVideo(firstSourceApi);

Here none of the sources have video element. We can again attach one to any of the sources available.

Controlling what sources load

We are able to define what level of load sources can do, by providing loadControl to the sourceOptions, which is explained in load control page. Additionally you can change it using the source API.