### Install Project Dependencies

Source: https://github.com/dash-industry-forum/dash.js/wiki/Grunt-tasks

Installs all project dependencies listed in the package.json file. This should be run in the project's build directory.

```bash
npm install
```

--------------------------------

### Manual Player Initialization with Start Time

Source: https://context7.com/dash-industry-forum/dash.js/llms.txt

Demonstrates manual player initialization, including specifying a start time in seconds for playback. Useful for VOD content where specific entry points are desired.

```javascript
const player = dashjs.MediaPlayer().create();
player.initialize(
  document.getElementById('videoPlayer'),
  'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
  false,   // autoPlay
  30       // startTime in seconds
);
```

--------------------------------

### Configure Karma and Setup Context

Source: https://github.com/dash-industry-forum/dash.js/blob/development/test/functional/view/index.html

Sets up the Karma testing environment and binds client configuration. This is essential for initializing the testing context.

```javascript
// Configure our Karma and set up bindings %CLIENT_CONFIG% window.__karma__.setupContext(window);
```

--------------------------------

### Initialize Playback at a Specific Start Time

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/advanced/load-with-starttime.html

Use `player.attachSource` with a start time to begin playback at a desired point. For live streams, prefix with 'posix:' for UTC time or omit for availabilityStartTime relative.

```javascript
function init() {
  var video, player, url = "https://livesim2.dashif.org/livesim2/testpic_2s/Manifest.mpd";
  player = dashjs.MediaPlayer().create();
  video = document.querySelector("video");
  player.initialize(); /* initialize the MediaPlayer instance */
  player.updateSettings({ debug: { logLevel: 4 } });
  const starttime = new Date().getTime() / 1000 - 60;
  player.attachView(video); /* tell the player which videoElement it should use */
  player.attachSource(url, `posix:${starttime}`); /* start from UTC time */
  /* player.attachSource(url, starttime); start relative to AST */
}
```

--------------------------------

### ControlBar Lifecycle Example

Source: https://github.com/dash-industry-forum/dash.js/blob/development/contrib/controlbar/README.md

Demonstrates the typical lifecycle of the ControlBar, from creation and initialization to enabling, disabling, resetting, and final cleanup.

```javascript
// Create
const cb = new ControlBar(player, video);
cb.init('#video-wrapper');
cb.disable();

// On stream initialized
cb.enable();

// Before loading a new stream
cb.reset();
cb.disable();

// After loading
cb.syncMuteState();

// On stream initialized again
cb.enable();

// Cleanup
cb.destroy();
```

--------------------------------

### Create Class with FactoryMaker

Source: https://github.com/dash-industry-forum/dash.js/wiki/Developer-Getting-Started-Guide

Example of creating a class instance using FactoryMaker.getClassFactory. The factory is then exported.

```javascript
const factory = FactoryMaker.getClassFactory(MediaPlayer);
export default factory;
```

--------------------------------

### Initialize Player with Video Element and Source

Source: https://context7.com/dash-industry-forum/dash.js/llms.txt

Shows how to initialize the player with a video element, manifest URL, and autoplay flag. This is a common setup for programmatic playback control.

```html
<video id="videoPlayer" controls style="width:640px;height:360px;"></video>
<script src="https://cdn.dashjs.org/latest/modern/umd/dash.all.min.js"></script>
<script>
  // Auto-load via <source> element — no JS initialization needed
  // Just set type="application/dash+xml" on the <source>
</script>
```

--------------------------------

### Install Grunt CLI

Source: https://github.com/dash-industry-forum/dash.js/wiki/Grunt-tasks

Installs the Grunt command-line interface globally. Ensure Node.js is installed first.

```bash
npm install grunt-cli -g
```

--------------------------------

### Create Singleton with FactoryMaker

Source: https://github.com/dash-industry-forum/dash.js/wiki/Developer-Getting-Started-Guide

Example of creating a singleton instance using FactoryMaker.getSingletonFactory. Ensure the factory name is assigned.

```javascript
MediaPlayerModel.__dashjs_factory_name = 'MediaPlayerModel';
export default FactoryMaker.getSingletonFactory(MediaPlayerModel);
```

--------------------------------

### Initialize Player with URL

Source: https://context7.com/dash-industry-forum/dash.js/llms.txt

A simple way to initialize the player with a video element and a stream URL. This is a common starting point for basic integrations.

```javascript
player.initialize(videoEl, url, true)
```

--------------------------------

### Build JSDocs

Source: https://github.com/dash-industry-forum/dash.js/blob/development/build/jsdoc/README.md

Run this command to generate the JSDocs for the project. Ensure dependencies are installed first.

```bash
npm run doc
```

--------------------------------

### Handle Manifest Loading Start

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/advanced/cmcd-from-manifest.html

Updates the UI with manifest request details, including the URL and service location, when the manifest loading process begins. It logs any errors encountered during this process.

```javascript
function _onManifestLoadingStarted(e) {
  try {
    if (e.request.serviceLocation) {
    }
    if (e.request.url) {
      const element = document.getElementById(`manifest-request-url`);
      element.innerText = e.request.url;
    }
    const slElement = document.getElementById(`manifest-service-location`);
    if (e.request.serviceLocation) {
      slElement.innerText = e.request.serviceLocation;
      _serviceLocationChanged({ manifest: e.request.serviceLocation }, locationSelectionImgDomElements)
    } else {
      slElement.innerText = '';
    }
  } catch (e) {
    console.error(e);
  }
}
```

--------------------------------

### Install dash.js 4.0.0-npm via npm

Source: https://github.com/dash-industry-forum/dash.js/wiki/Migration-to-dash.js-4.0

Use this command to install dash.js version 4.0.0 from npm, as the original 4.0.0 tag was republished with a different name due to a configuration error.

```bash
npm install dashjs@4.0.0-npm
```

--------------------------------

### player.initialize(view, source, autoPlay, startTime?)

Source: https://context7.com/dash-industry-forum/dash.js/llms.txt

Initializes the player with a video element, a manifest URL, and an autoplay flag. Optionally, a startTime can be specified to begin playback at a particular point.

```APIDOC
## player.initialize(view, source, autoPlay, startTime?)

### Description
Initializes the player with an HTML `<video>` element, a manifest URL, and an autoplay flag. An optional `startTime` (in seconds) can be provided to begin playback at a specific position.

### Parameters

*   **view** (HTMLVideoElement) - The HTML video element to attach the player to.
*   **source** (string) - The URL of the MPEG-DASH manifest file.
*   **autoPlay** (boolean) - Whether the video should start playing automatically.
*   **startTime** (number, optional) - The time in seconds to start playback from.

### Usage Examples
```html
<video id="videoPlayer" controls style="width:640px;height:360px;"></video>
<script src="https://cdn.dashjs.org/latest/modern/umd/dash.all.min.js"></script>
<script>
  // Auto-load via <source> element — no JS initialization needed
  // Just set type="application/dash+xml" on the <source>
</script>

<!-- OR via video source element (zero-JS approach) -->
<video autoplay preload="none" controls>
  <source src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd"
          type="application/dash+xml"/>
</video>
```

```js
// Manual initialization with start time
const player = dashjs.MediaPlayer().create();
player.initialize(
  document.getElementById('videoPlayer'),
  'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
  false,   // autoPlay
  30       // startTime in seconds
);
```
```

--------------------------------

### CMAF Low Latency Chunk Structure Example

Source: https://github.com/dash-industry-forum/dash.js/wiki/Low-Latency-streaming

This example illustrates the structure of CMAF segments containing multiple chunks, indicated by repeated 'moof' and 'mdat' boxes. It shows box sizes and key metadata like sequence numbers and decode times.

```text
[styp] size=8+16
[prft] size=8+24
[moof] size=8+96
  [mfhd] size=12+4
    sequence number = 827234
  [traf] size=8+72
    [tfhd] size=12+16, flags=20038
      track ID = 1
      default sample duration = 1001
      default sample size = 15704
      default sample flags = 1010000
    [tfdt] size=12+8, version=1
      base media decode time = 828060233
    [trun] size=12+12, flags=5
      sample count = 1
      data offset = 112
      first sample flags = 2000000
[mdat] size=8+15704
[prft] size=8+24
[moof] size=8+92
  [mfhd] size=12+4
    sequence number = 827235
  [traf] size=8+68
    [tfhd] size=12+16, flags=20038
      track ID = 1
      default sample duration = 1001
      default sample size = 897
      default sample flags = 1010000
    [tfdt] size=12+8, version=1
      base media decode time = 828061234
    [trun] size=12+8, flags=1
      sample count = 1
      data offset = 108
[mdat] size=8+897
[prft] size=8+24
[moof] size=8+92
  [mfhd] size=12+4
    sequence number = 827236
  [traf] size=8+68
    [tfhd] size=12+16, flags=20038
      track ID = 1
      default sample duration = 1001
      default sample size = 7426
      default sample flags = 1010000
    [tfdt] size=12+8, version=1
      base media decode time = 828062235
    [trun] size=12+8, flags=1
      sample count = 1
      data offset = 108
[mdat] size=8+7426
```

--------------------------------

### Initialize Player with Custom ABR Rules

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/abr/custom-abr-rules.html

This example shows how to initialize the dash.js player, disable all default ABR rules, and add a custom quality switch rule named 'LowestBitrateRule'. Ensure your custom rule is defined and accessible before calling addABRCustomRule.

```javascript
function init() {
  var video, player, url = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd';
  video = document.querySelector('video');
  player = dashjs.MediaPlayer().create();
  
  player.updateSettings({
    streaming: {
      abr: {
        rules: {
          throughputRule: { active: false },
          bolaRule: { active: false },
          insufficientBufferRule: { active: false },
          switchHistoryRule: { active: false },
          droppedFramesRule: { active: false },
          abandonRequestsRule: { active: false }
        }
      }
    }
  });
  
  player.addABRCustomRule('qualitySwitchRules', 'LowestBitrateRule', LowestBitrateRule);
  player.initialize(video, url, true);
}
```

--------------------------------

### Initialize Player with DRM System String Priority

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/drm/system-string-priority.html

Configure the player with specific DRM configurations, including server URLs, custom system string priorities, and HTTP headers for license acquisition. This is useful when multiple system strings are available for a single DRM scheme.

```javascript
function init() {
  var protData = { 'com.widevine.alpha': { 'serverURL': 'https://drm-widevine-licensing.axtest.net/AcquireLicense', 'systemStringPriority': 
['com.widevine.something', 'com.widevine.alpha'], 'priority': 2, 'httpRequestHeaders': { 'X-AxDRM-Message': "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJ2ZXJzaW9uIjogMSwKICAiY29tX2tleV9pZCI6ICI2OWU1NDA4OC1lOWUwLTQ1MzAtOGMxYS0xZWI2ZGNkMGQxNGUiLAogICJtZXNzYWdlIjogewogICAgInR5cGUiOiAiZW50aXRsZW1lbnRfbWVzc2FnZSIsCiAgICAidmVyc2lvbiI6IDIsCiAgICAibGljZW5zZSI6IHsKICAgICAgImFsbG93X3BlcnNpc3RlbmNlIjogdHJ1ZQogICAgfSwKICAgICJjb250ZW50X2tleXNfc291cmNlIjogewogICAgICAiaW5saW5lIjogWwogICAgICAgIHsKICAgICAgICAgICJpZCI6ICIzMDJmODBkZC00MTFlLTQ4ODYtYmNhNS1iYjFmODAxOGEwMjQiLAogICAgICAgICAgImVuY3J5cHRlZF9rZXkiOiAicm9LQWcwdDdKaTFpNDNmd3YremZ0UT09IiwKICAgICAgICAgICJ1c2FnZV9wb2xpY3kiOiAiUG9saWN5IEEiCiAgICAgICAgfQogICAgICBdCiAgICB9LAogICAgImNvbnRlbnRfa2V5X3VzYWdlX3BvbGljaWVzIjogWwogICAgICB7CiAgICAgICAgIm5hbWUiOiAiUG9saWN5IEEiLAogICAgICAgICJwbGF5cmVhZHkiOiB7CiAgICAgICAgICAibWluX2RldmljZV9zZWN1cml0eV9sZXZlbCI6IDE1MCwKICAgICAgICAgICJwbGF5X2VuYWJsZXJzIjogWwogICAgICAgICAgICAiNzg2NjI3RDgtQzJBNi00NEJFLThGODgtMDhBRTI1NUIwMUE3IgogICAgICAgICAgXQogICAgICAgIH0KICAgICAgfQogICAgXQogIH0KfQ.
_NfhLVY7S6k8TJDWPeMPhUawhympnrk6WAZHOVjER6M" } }, 'com.microsoft.playready': { 'serverURL': 'https://drm-playready-licensing.axtest.net/AcquireLicense', 'systemStringPriority': 
['com.microsoft.playready.something', 'com.microsoft.playready.recommendation', 'com.microsoft.playready.hardware', 'com.microsoft.playready'], 'priority': 1, 'httpRequestHeaders': { 'X-AxDRM-Message': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImZpcnN0X3BsYXlfZXhwaXJhdGlvbiI6NjAsInBsYXlyZWFkeSI6eyJyZWFsX3RpbWVfZXhwaXJhdGlvbiI6dHJ1ZX0sImtleXMiOlt7ImlkIjoiOWViNDA1MGQtZTQ0Yi00ODAyLTkzMmUtMjdkNzUwODNlMjY2IiwiZW5jcnlwdGVkX2tleSI6ImxLM09qSExZVzI0Y3Iya3RSNzRmbnc9PSJ9XX19.FAbIiPxX8BHi9RwfzD7Yn-wugU19ghrkBFKsaCPrZmU' } } }; var video, player, url = "https://media.axprod.net/TestVectors/Cmaf/protected_1080p_h264_cbcs/manifest.mpd"; video = document.querySelector('video'); player = dashjs.MediaPlayer().create(); player.updateSettings({ debug: { logLevel: 5 } }); player.initialize(video, url, true); player.setProtectionData(protData);
```

--------------------------------

### Create Player Instance

Source: https://context7.com/dash-industry-forum/dash.js/llms.txt

Demonstrates the factory-based pattern for creating a dash.js player instance. This is the first step before applying settings or attaching the view and source.

```javascript
dashjs.MediaPlayer().create()
```

--------------------------------

### Initialize Player and TimingObject

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/advanced/timing-object.html

Initializes the dash.js player and sets up the TimingObject for synchronized playback. Ensure TimingObject, TimingProvider, and timingsrc are imported.

```javascript
window.init = () => {
    const player = dashjs.MediaPlayer().create();
    const url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";
    const video = document.querySelector("video");
    player.initialize(video, url, false);
    const pauseButton = document.getElementById("pause");
    const playButton = document.getElementById("play");
    Promise.all([
        import('https://jspm.dev/npm:timing-object'),
        import('https://jspm.dev/npm:timing-provider'),
        import('https://jspm.dev/npm:timingsrc')
    ]).then(([{ TimingObject }, { TimingProvider }, { setTimingsrc }]) => {
        const timingObject = new TimingObject(new TimingProvider('V7X4LuPQMgtuspLtLy4i'));
        pauseButton.addEventListener('click', () => {
            pauseButton.disabled = true;
            playButton.disabled = false;
            timingObject.update({ velocity: 0 });
        });
        playButton.addEventListener('click', () => {
            playButton.disabled = true;
            pauseButton.disabled = false;
            timingObject.update({ velocity: 1 });
        });
        timingObject.addEventListener('change', () => {
            const { velocity } = timingObject.query();
            if (velocity === 0) {
                pauseButton.disabled = true;
                playButton.disabled = false;
            } else {
                playButton.disabled = true;
                pauseButton.disabled = false;
            }
        });
        timingObject.addEventListener('readystatechange', () => {
            if (timingObject.readyState === 'open') {
                playButton.disabled = false;
                setTimingsrc(video, timingObject);
            }
        });
        video.addEventListener('ended', () => {
            pauseButton.disabled = true;
            playButton.disabled = false;
            timingObject.update({ position: 0 });
        });
    });
}
```

--------------------------------

### Manifest Loading Started Event Handler

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/advanced/content-steering.html

Handles the MANIFEST_LOADING_STARTED event, which is triggered before the manifest file begins to load. This can be used for pre-loading logic or UI feedback.

```javascript
function _onManifestLoadingStarted(e) {
    // Handle manifest loading started event
}
```

--------------------------------

### Initialize Player and Add External Subtitles

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/captioning/external-subtitle.html

Use `dashjs.MediaPlayer().create()` to initialize the player and `addExternalSubtitle` to include external WebVTT files. Ensure the `ExternalSubtitle` object is configured with the correct `id`, `url`, `mimeType`, `language`, and `bandwidth`.

```javascript
function init() {
  var url = 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
    video = document.querySelector('video'),
    controlbar,
    player;

  var externalSubtitle = new dashjs.ExternalSubtitle({
    id: 'external_1',
    url: 'https://reference.dashif.org/other/content/webvtt/external-subtitle.vtt',
    mimeType: 'text/vtt',
    language: 'en',
    bandwidth: 256
  });

  var externalSubtitleTwo = new dashjs.ExternalSubtitle({
    id: 'external_2',
    url: 'https://reference.dashif.org/other/content/webvtt/external-subtitle-2.vtt',
    mimeType: 'text/vtt',
    language: 'de',
    bandwidth: 256
  });

  player = dashjs.MediaPlayer().create();
  player.initialize(video, null, true);
  controlbar = new ControlBar(player);
  controlbar.initialize();

  player.addExternalSubtitle(externalSubtitle);
  player.addExternalSubtitle(externalSubtitleTwo);

  player.attachSource(url);
}
```

--------------------------------

### Initialize ControlBar.js with Dash.js Player

Source: https://github.com/dash-industry-forum/dash.js/blob/development/contrib/akamai/controlbar/README.md

Instantiate and initialize the ControlBar with your Dash.js player instance.

```javascript
player.attachView(video);
var controlbar = new ControlBar(player); //Player is instance of Dash.js MediaPlayer;
controlbar.initialize();
```

--------------------------------

### Get Cache Statistics

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/performance-tests/initcache-test.html

Retrieves statistics from the InitCache if a reference is available, otherwise returns fallback values. This function is used to monitor the current state of the cache.

```javascript
function getCacheStats() {
  if (initCacheRef && initCacheRef.getStats) {
    return initCacheRef.getStats();
  }
  // Fallback: estimate from player metrics
  return {
    entryCount: 'N/A (use Chrome DevTools)',
    streamCount: 'N/A',
    maxSize: 50,
    accessOrderLength: 'N/A'
  };
}
```

--------------------------------

### Initialize Player and Attach TTML Rendering

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/captioning/multi-track-captions.html

Initializes the dash.js player, attaches it to the video element, and sets up TTML rendering. This is a foundational step for displaying text tracks.

```javascript
function init() {
    var TTMLRenderingDiv = document.querySelector("#ttml-rendering-div");
    videoElement = document.querySelector(".videoContainer video");
    player = dashjs.MediaPlayer().create();
    player.initialize(videoElement);
    player.attachTTMLRenderingDiv(TTMLRenderingDiv);
    player.on('currentTrackChanged', function(e) {
        if (e.newMediaInfo.type === 'text') {
            setTimeout(showDomStorage, 0);
        }
    });
    controlbar = new ControlBar(player);
    /## Checkout ControlBar.js for more info on how to target/add text tracks to UI ##
    controlbar.initialize();
    document.getElementById("lastMediaSettingsCachingInfoEnabled").checked = player.getSettings().streaming.lastMediaSettingsCachingInfo.enabled;
    showDomStorage();
}
```

--------------------------------

### Get Selected Audio Track

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/multi-audio/multi-audio-default-lang-acc.html

Retrieves the currently selected audio track information after the stream has been initialized. This is useful for understanding which audio track is actively playing.

```javascript
player.getCurrentTrackFor('audio')
```

--------------------------------

### Initialize dash.js Player and Event Listeners

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/advanced/content-steering.html

Initializes the dash.js player and sets up event listeners for content steering-related events. This is the starting point for integrating content steering.

```javascript
let player;
let mpd = "";
let currentSelectedServiceLocation = {}
let cdnSelectionImgDomElements = {};
let locationSelectionImgDomElements = {};

function init() {
    player = dashjs.MediaPlayer().create();
    document.getElementById('load-button').addEventListener('click', function () {
        _load();
    })
    player.initialize(document.querySelector("video"), null, true);
    player.on(dashjs.MediaPlayer.events.FRAGMENT_LOADING_STARTED, _onFragmentLoadingStarted, null);
    player.on(dashjs.MediaPlayer.events.MANIFEST_LOADING_STARTED, _onManifestLoadingStarted, null);
    player.on(dashjs.MediaPlayer.events.CONTENT_STEERING_REQUEST_COMPLETED, _onContentSteeringRequestCompleted, null);
    player.on(dashjs.MediaPlayer.events.BASE_URLS_UPDATED, _onBaseUrlsUpdated, null);
    player.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, _onManifestLoaded, null);
}
```

--------------------------------

### Initialize Player with License Filters

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/drm/license-wrapping.html

Initializes the dash.js player, registers custom filters for license requests and responses, and sets up Widevine protection data. Use this to intercept and modify DRM license operations.

```javascript
function init() {
    const protData = {
        "com.widevine.alpha": {
            "serverURL": "https://drm-widevine-licensing.axtest.net/AcquireLicense",
            priority: 0
        }
    };
    var video, player, url = "https://media.axprod.net/TestVectors/Cmaf/protected_1080p_h264_cbcs/manifest.mpd";
    var filterLicenseRequest = function (request) {
        console.log('LICENSE REQUEST', request);
        /* Here you can modify/overwrite the licens request (url, headers, data...) */
        request.headers = {
            "X-AxDRM-Message": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ewogICJ2ZXJzaW9uIjogMSwKICAiY29tX2tleV9pZCI6ICI2OWU1NDA4OC1lOWUwLTQ1MzAtOGMxYS0xZWI2ZGNkMGQxNGUiLAogICJtZXNzYWdlIjogewogICAgInR5cGUiOiAiZW50aXRsZW1lbnRfbWVzc2FnZSIsCiAgICAidmVyc2lvbiI6IDIsCiAgICAibGljZW5zZSI6IHsKICAgICAgImFsbG93X3BlcnNpc3RlbmNlIjogdHJ1ZQogICAgfSwKICAgICJjb250ZW50X2tleXNfc291cmNlIjogewogICAgICAiaW5saW5lIjogWwogICAgICAgIHsKICAgICAgICAgICJpZCI6ICIzMDJmODBkZC00MTFlLTQ4ODYtYmNhNS1iYjFmODAxOGEwMjQiLAogICAgICAgICAgImVuY3J5cHRlZF9rZXkiOiAicm9LQWcwdDdKaTFpNDNmd3YremZ0UT09IiwKICAgICAgICAgICJ1c2FnZV9wb2xpY3kiOiAiUG9saWN5IEEiCiAgICAgICAgfQogICAgICBdCiAgICB9LAogICAgImNvbnRlbnRfa2V5X3VzYWdlX3BvbGljaWVzIjogWwogICAgICB7CiAgICAgICAgIm5hbWUiOiAiUG9saWN5IEEiLAogICAgICAgICJwbGF5cmVhZHkiOiB7CiAgICAgICAgICAibWluX2RldmljZV9zZWN1cml0eV9sZXZlbCI6IDE1MCwKICAgICAgICAgICJwbGF5X2VuYWJsZXJzIjogWwogICAgICAgICAgICAiNzg2NjI3RDgtQzJBNi00NEJFLThGODgtMDhBRTI1NUIwMUE3IgogICAgICAgICAgXQogICAgICAgIH0KICAgICAgfQogICAgXQogIH0KfQ.
_NfhLVY7S6k8TJDWPeMPhUawhympnrk6WAZHOVjER6M" 
        }
        return Promise.resolve();
    }
    var filterLicenseResponse = function (response) {
        console.log('LICENSE RESPONSE', response);
        /* Here you can modify/overwrite the license response */
        return Promise.resolve();
    }
    video = document.querySelector("video");
    player = dashjs.MediaPlayer().create();
    player.registerLicenseRequestFilter(filterLicenseRequest);
    player.registerLicenseResponseFilter(filterLicenseResponse);
    player.initialize(video, url, true);
    player.setProtectionData(protData);
}
function check() {
    if (location.protocol === 'http:' && location.hostname !== 'localhost') {
        var out = 'This page has been loaded under http. This might result in the EME APIs not being available to the player and any DRM-protected content will fail to play. ' + 'If you wish to test manifest URLs that require EME support, then <a href=\'https:' + window.location.href.substring(window.location.protocol.length) + '\'>reload this page under https</a>.'
        var div = document.getElementById('http-warning');
        div.innerHTML = out;
        div.style.display = ''
    }
}

document.addEventListener('DOMContentLoaded', function () {
    check();
    init();
});
```

--------------------------------

### Image Subtitle Adaptation Set Example

Source: https://github.com/dash-industry-forum/dash.js/wiki/Agenda-for-the-2016-San-Francisco-face-to-face-meeting-Dec-14th

Defines an AdaptationSet for image subtitles using JPEG format with a SegmentTemplate for thumbnail generation. EssentialProperty indicates the tile format.

```xml
<AdaptationSet id="3" mimeType="image/jpeg" contentType="image">
  <SegmentTemplate media="$RepresentationID$/tile$Number$.jpg” duration="125" startNumber="1"/>
    <Representation bandwidth="10000" id="thumbnails" width="6400" height="180">
      <EssentialProperty schemeIdUri=“dashif.org/thumbnail_tile” value="25x1"/>
    </Representation>
  </SegmentationTemplate>
</AdaptationSet>
```

--------------------------------

### Initialize Player with Clearkey DRM

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/drm/clearkey.html

Use this snippet to initialize the dash.js player and configure it for Clearkey DRM. Ensure the video element is available in the DOM and the correct manifest URL is provided. The protection data object must contain valid Clearkey key IDs and secrets.

```javascript
function init() {
  const protData = { "org.w3.clearkey": { "clearkeys": { "nrQFDeRLSAKTLifXUIPiZg": "FmY0xnWCPCNaSpRG-tUuTQ" } } };
  var video, player, url = "https://media.axprod.net/TestVectors/v7-MultiDRM-SingleKey/Manifest_1080p_ClearKey.mpd";
  video = document.querySelector("video");
  player = dashjs.MediaPlayer().create();
  player.initialize(video, url, true);
  player.setProtectionData(protData);
}
```

--------------------------------

### Attach View and Source Separately

Source: https://context7.com/dash-industry-forum/dash.js/llms.txt

Shows how to attach the video element and the stream URL to the player instance separately. This allows for more granular control over the player's setup.

```javascript
player.attachView(videoEl)
player.attachSource(url)
```

--------------------------------

### Initialize Player and Handle Events

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/advanced/ext-url-query-info.html

Initializes the dash.js player and sets up event listeners for manifest loading and fragment loading completion. This is the main entry point for the player's functionality.

```javascript
var player;
function init() {
  var video = document.querySelector('video');
  var manifestSelect = document.getElementById('manifestSelect');
  var queryParamsInput = document.getElementById('queryParamsInput');
  var loadButton = document.getElementById('loadButton');
  player = dashjs.MediaPlayer().create();
  player.initialize(video, null, false);
  player.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, function (event) {
    var manifestUrl = getManifestUrlWithQueryParams(manifestSelect.value, queryParamsInput.value);
    fetchManifest(manifestUrl);
  });
  player.on(dashjs.MediaPlayer.events.FRAGMENT_LOADING_COMPLETED, function (event) {
    var url = event.request.url;
    var formattedUrl = highlightQueryParams(url);
    log(formattedUrl);
  });
  loadButton.addEventListener('click', function () {
    updateManifestSource();
  });
}

document.addEventListener('DOMContentLoaded', function () {
  init();
});
```

--------------------------------

### Initialize Player with PlayReady DRM

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/drm/playready.html

Use this code to initialize the dash.js player with PlayReady DRM. Ensure the 'protData' object contains the correct PlayReady server URL and any necessary HTTP headers for license acquisition.

```javascript
function init() {
  const protData = { "com.microsoft.playready": { "serverURL": "https://drm-playready-licensing.axtest.net/AcquireLicense", "httpRequestHeaders": { "X-AxDRM-Message": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiYjMzNjRlYjUtNTFmNi00YWUzLThjOTgtMzNjZWQ1ZTMxYzc4IiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiMDg3Mjc4NmUtZjllNy00NjVmLWEzYTItNGU1YjBlZjhmYTQ1IiwiZW5jcnlwdGVkX2tleSI6IlB3NitlRVlOY3ZqWWJmc2gzWDNmbWc9PSJ9LHsiaWQiOiJjMTRmMDcwOS1mMmI5LTQ0MjctOTE2Yi02MWI1MjU4NjUwNmEiLCJlbmNyeXB0ZWRfa2V5IjoiLzErZk5paDM4bXFSdjR5Y1l6bnQvdz09In0seyJpZCI6IjhiMDI5ZTUxLWQ1NmEtNDRiZC05MTBmLWQ0YjVmZDkwZmJhMiIsImVuY3J5cHRlZF9rZXkiOiJrcTBKdVpFanBGTjhzYVRtdDU2ME9nPT0ifSx7ImlkIjoiMmQ2ZTkzODctNjBjYS00MTQ1LWFlYzItYzQwODM3YjRiMDI2IiwiZW5jcnlwdGVkX2tleSI6IlRjUlFlQld4RW9IT0tIcmFkNFNlVlE9PSJ9LHsiaWQiOiJkZTAyZjA3Zi1hMDk4LTRlZTAtYjU1Ni05MDdjMGQxN2ZiY2MiLCJlbmNyeXB0ZWRfa2V5IjoicG9lbmNTN0dnbWVHRmVvSjZQRUFUUT09In0seyJpZCI6IjkxNGU2OWY0LTBhYjMtNDUzNC05ZTlmLTk4NTM2MTVlMjZmNiIsImVuY3J5cHRlZF9rZXkiOiJlaUkvTXNsbHJRNHdDbFJUL0xObUNBPT0ifSx7ImlkIjoiZGE0NDQ1YzItZGI1ZS00OGVmLWIwOTYtM2VmMzQ3YjE2YzdmIiwiZW5jcnlwdGVkX2tleSI6IjJ3K3pkdnFycERWM3hSMGJKeTR1Z3c9PSJ9LHsiaWQiOiIyOWYwNWU4Zi1hMWFlLTQ2ZTQtODBlOS0yMmRjZDQ0Y2Q3YTEiLCJlbmNyeXB0ZWRfa2V5IjoiL3hsU0hweHdxdTNnby9nbHBtU2dhUT09In0seyJpZCI6IjY5ZmU3MDc3LWRhZGQtNGI1NS05NmNkLWMzZWRiMzk5MTg1MyIsImVuY3J5cHRlZF9rZXkiOiJ6dTZpdXpOMnBzaTBaU3hRaUFUa1JRPT0ifV19fQ.BXr93Et1krYMVs-CUnf7F3ywJWFRtxYdkR7Qn4w3-to" } } }; var video, player, url = "https://media.axprod.net/TestVectors/v7-MultiDRM-MultiKey-MultiPeriod/Manifest.mpd"; video = document.querySelector("video"); player = dashjs.MediaPlayer().create(); player.initialize(video, url, true); player.setProtectionData(protData); }
```

--------------------------------

### Get Initial Media Settings For Audio

Source: https://github.com/dash-industry-forum/dash.js/blob/development/samples/multi-audio/multi-audio-default-lang-acc.html

Retrieves the initial media settings that were configured for the audio track. This is useful for debugging or verifying the settings applied during player initialization.

```javascript
player.getInitialMediaSettingsFor('audio')
```