---
updatedAt: 2026-07-02T09:01:22.000Z
agentTools:
  siteIndex: https://developer.bitmovin.com/llms.txt
  projectIndex: https://developer.bitmovin.com/playback/llms.txt
---

# Adding multiple sources

Samples on workflow when working with multiple sources

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

```javascript
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',
    type: 'hls',
  }]
}

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

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.

### Resource types

As of version `10.2.0`, every resource in a source's `resources` array must declare a `type`. The player uses this `type` to route each resource to the streaming technology that handles it, so it is required even when a source has a single resource.

The supported values are:

* `'hls'` — HLS stream (`.m3u8`)
* `'dash'` — DASH stream (`.mpd`)
* `'progressive'` — progressive file (e.g. `.mp4`)

```typescript
const sourceConfig = {
  resources: [{
    url: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
    type: 'dash',
  }]
}
```

> 📘 Migrating from earlier versions
>
> Before `10.2.0` the `type` field was optional, but beginning with 10.2.0, `type` is now mandatory on every resource.

A single source can also list resources of *different* types, letting the player pick the format it can play in the current environment. See [Multi-technology support](https://developer.bitmovin.com/playback/docs/multi-technology-support).

### Adding multiple inactive sources

We can control if the source should be automatically attached by providing [source options](https://cdn.bitmovin.com/player/web_x/beta/10/docs/types/player_types_packages_sources_api_Types.SourceOptionsWithAttach.html) when adding the source. This options contains `attach` which can be boolean or  [AttachOptions](https://cdn.bitmovin.com/player/web_x/beta/10/docs/interfaces/player_types_packages_sources_api_Types.AttachOptions.html).

```typescript
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.

```typescript
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.

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

***

<br />

### Getting all added sources

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

```typescript
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.

```typescript
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.

```typescript
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).

```typescript
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](https://dash.readme.com/go/bitmovin-playback?redirect=%2Fv1%2Fdocs%2Fload-control). Additionally you can change it using the [source API](https://developer.bitmovin.com/playback/docs/sourceapi-playbackapi#loadcontrol-api).