### Getting Started Example

Source: https://github.com/videojs/http-streaming/blob/main/README.md

Example of how to include videojs-http-streaming in a page when a specific combination of Video.js and VHS versions is needed.

```html
<video-js id=vid1 width=600 height=300 class="vjs-default-skin" controls>
  <source
     src="https://example.com/index.m3u8"
     type="application/x-mpegURL">
</video-js>
<!-- "core" version of Video.js -->
<script src="video.core.min.js"></script>
<script src="videojs-http-streaming.min.js"></script>
<script>
var player = videojs('vid1');
player.play();
</script>
```

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

### Development Setup

Source: https://github.com/videojs/http-streaming/blob/main/CONTRIBUTING.md

Steps to set up the development environment, including installing dependencies and starting the development server.

```bash
npm install
npm start
```

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

### Install project dependencies

Source: https://github.com/videojs/http-streaming/blob/main/COLLABORATOR_GUIDE.md

Installs the necessary dependencies for the project.

```sh
npm install
```

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

### Install Node.js version

Source: https://github.com/videojs/http-streaming/blob/main/COLLABORATOR_GUIDE.md

Installs the Node.js version specified in the .nvmrc file.

```sh
nvm install
```

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

### Migrating hls-gap-skip event listener

Source: https://github.com/videojs/http-streaming/blob/main/docs/migration-2-3.md

Example demonstrating the change from listening to 'hls-gap-skip' to 'vhs-gap-skip'.

```javascript
player.tech().on('hls-gap-skip', () => {
  console.log('a gap has been skipped');
});
```

```javascript
player.tech().on('vhs-gap-skip', () => {
  console.log('a gap has been skipped');
});
```

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

### Install videojs-http-streaming with npm

Source: https://github.com/videojs/http-streaming/blob/main/README.md

To install `videojs-http-streaming` with npm, run

```bash
npm install --save @videojs/http-streaming
```

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

### Examples of Player Time to Program Time Conversion

Source: https://github.com/videojs/http-streaming/blob/main/docs/program-time-from-player-time.md

Illustrative examples demonstrating the usage of the `playerTimeToProgramTime` function with different segment data and player times, showing the resulting program times.

```javascript
// Program Times:
//   segment1: 2018-11-10T00:00:30.1Z => 2018-11-10T00:00:32.1Z
//   segment2: 2018-11-10T00:00:32.1Z => 2018-11-10T00:00:34.1Z
//   segment3: 2018-11-10T00:00:34.1Z => 2018-11-10T00:00:36.1Z
//
// Player Times:
//   segment1: 0 => 2
//   segment2: 2 => 4
//   segment3: 4 => 6

const segment1 = {
  dateTimeObject: 2018-11-10T00:00:30.1Z
  videoTimingInfo: {
    transmuxerPrependedSeconds: 0,
    transmuxedPresentationStart: 0
  }
};
playerTimeToProgramTime(0.1, segment1);
// startOfSegment = 0 + 0 = 0
// offsetFromSegmentStart = 0.1 - 0 = 0.1
// return 2018-11-10T00:00:30.1Z + 0.1 = 2018-11-10T00:00:30.2Z

const segment2 = {
  dateTimeObject: 2018-11-10T00:00:32.1Z
  videoTimingInfo: {
    transmuxerPrependedSeconds: 0.3,
    transmuxedPresentationStart: 1.7
  }
};
playerTimeToProgramTime(2.5, segment2);
// startOfSegment = 1.7 + 0.3 = 2
// offsetFromSegmentStart = 2.5 - 2 = 0.5
// return 2018-11-10T00:00:32.1Z + 0.5 = 2018-11-10T00:00:32.6Z

const segment3 = {
  dateTimeObject: 2018-11-10T00:00:34.1Z
  videoTimingInfo: {
    transmuxerPrependedSeconds: 0.2,
    transmuxedPresentationStart: 3.8
  }
};
playerTimeToProgramTime(4, segment3);
// startOfSegment = 3.8 + 0.2 = 4
// offsetFromSegmentStart = 4 - 4 = 0
// return 2018-11-10T00:00:34.1Z + 0 = 2018-11-10T00:00:34.1Z
```

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

### Caption Services Example

Source: https://github.com/videojs/http-streaming/blob/main/README.md

An example demonstrating how to configure caption services.

```javascript
{
  vhs: {
    captionServices: {
      CC1: {
        language: 'en',
        label: 'English'
      },
      SERVICE1: {
        langauge: 'kr',
        label: 'Korean',
        encoding: 'euc-kr'
        default: true,
      }
    }
  }
}
```

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

### m3u8 layout example

Source: https://github.com/videojs/http-streaming/blob/main/docs/multiple-alternative-audio-tracks.md

An example of how audio tracks might be represented in an m3u8 manifest.

```javascript
{ 
	'media-group-1': [{
		'audio-track-1': {
			default: true,
			lang: 'eng'
		},
		'audio-track-2': {
			default: false,
			lang: 'fr'
    },
		'audio-track-3': {
			default: false,
			lang: 'eng',
      characteristics: 'public.accessibility.describes-video'
		}
	}]
}
```

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

### HTML Video Tag Example

Source: https://github.com/videojs/http-streaming/wiki/A-Walk-Through-VHS

An example of an HTML <video> tag with a source for HLS manifest, used to initiate the VHS handler.

```html
<video id="myPlayer" class="video-js">
  <source src="http://example.com/manifest.m3u8" type="application/x-mpegURL">
</video>
```

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

### Build videojs-http-streaming

Source: https://github.com/videojs/http-streaming/blob/main/README.md

Commands to clone the repository, install dependencies, and build the project.

```bash
git clone https://github.com/videojs/http-streaming
cd http-streaming
npm i
npm run build
```

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

### Video.js Player Setup for HLS

Source: https://github.com/videojs/http-streaming/blob/main/docs/a-walk-through-vhs.md

Setting up a Video.js player with HLS content, including necessary CSS and JavaScript includes, and the video tag with source.

```html
<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>

<video-js id="myPlayer" class="video-js" data-setup='{}'>
  <source src="http://example.com/manifest.m3u8" type="application/x-mpegURL">
</video-js>
```

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

### mp4VideoInit.mp4 and mp4AudioInit.mp4

Source: https://github.com/videojs/http-streaming/blob/main/docs/creating-content.md

Using DASH as the format type (-f) will lead to two init segments, one for video and one for audio. Using HLS will lead to one joined. Renamed from .m4s to .mp4

```bash
$ ffmpeg -i input.mp4 -f dash out.mpd
```

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

### Segment Video Timing Information

Source: https://github.com/videojs/http-streaming/blob/main/docs/program-time-from-player-time.md

This JSON structure shows the properties needed for each segment to facilitate time conversions, including transmuxer prepended seconds and the transmuxed presentation start time.

```json
{
  "segment": {
    "start": "number",
    "videoTimingInfo": {
      "transmuxerPrependedSeconds": "number",
      "transmuxedPresentationStart": "number"
    }
  }
}
```

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

### Formula for Player Time to Program Time Conversion

Source: https://github.com/videojs/http-streaming/blob/main/docs/program-time-from-player-time.md

This JavaScript function calculates the program time given a player time and segment information. It accounts for transmuxer prepended seconds and the transmuxed presentation start to determine the correct offset.

```javascript
const playerTimeToProgramTime = (playerTime, segment) => {
  if (!segment.dateTimeObject) {
    // Can't convert without an "anchor point" for the program time (i.e., a time that can
    // be used to map the start of a segment with a real world time).
    return null;
  }

  const transmuxerPrependedSeconds = segment.videoTimingInfo.transmuxerPrependedSeconds;
  const transmuxedStart = segment.videoTimingInfo.transmuxedPresentationStart;

  // get the start of the content from before old content is prepended
  const startOfSegment = transmuxedStart + transmuxerPrependedSeconds;
  const offsetFromSegmentStart = playerTime - startOfSegment;

  return new Date(segment.dateTimeObject.getTime() + offsetFromSegmentStart * 1000);
};
```

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

### webmVideoInit.webm and webmVideo.webm

Source: https://github.com/videojs/http-streaming/blob/main/docs/creating-content.md

Concatenates init and video segments, then converts to webm format using VP9 codec for DASH output. Finally, renames the output files to the specified webm names.

```bash
$ cat mp4VideoInit.mp4 mp4Video.mp4 > video.mp4
$ ffmpeg -i video.mp4 -dash_segment_type webm -c:v libvpx-vp9 -f dash output.mpd
$ mv init-stream0.webm webmVideoInit.webm
$ mv chunk-stream0-00001.webm webmVideo.webm
```

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

### Clone repository for release

Source: https://github.com/videojs/http-streaming/blob/main/COLLABORATOR_GUIDE.md

Clones a clean copy of the http-streaming repository for release preparation.

```sh
git clone git@github.com:videojs/http-streaming vhs-release
cd vhs-release
```

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

### Player-specific onRequest hook example

Source: https://github.com/videojs/http-streaming/blob/main/README.md

This example demonstrates how to add a player-specific onRequest hook to modify request options.

```javascript
player.on('xhr-hooks-ready', () => {
  const playerRequestHook = (options) => {
    return {
      uri: 'https://new.options.uri'
    };
  };
  player.tech().vhs.xhr.onRequest(playerRequestHook);
});
```

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

### Global onRequest hook example

Source: https://github.com/videojs/http-streaming/blob/main/README.md

This example shows how to add a global onRequest hook that affects all players on a page.

```javascript
// Global request callback, will affect every player.
const globalRequestHook = (options) => {
  return {
    uri: 'https://new.options.global.uri'
  };
};
videojs.Vhs.xhr.onRequest(globalRequestHook);
```

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

### Global onResponse hook example

Source: https://github.com/videojs/http-streaming/blob/main/README.md

This example demonstrates adding a global onResponse hook to process data from requests across all players.

```javascript
// Global response hook callback, will affect every player.
const globalResponseHook = (request, error, response) => {
  const bar = response.headers.foo
};

videojs.Vhs.xhr.onResponse(globalResponseHook);
```

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

### Basic Video Tag with HLS Source

Source: https://github.com/videojs/http-streaming/blob/main/docs/a-walk-through-vhs.md

An example of a basic HTML video tag with a source pointing to an HLS manifest file.

```html
<video>
  <source src="http://example.com/manifest.m3u8" type="application/x-mpegURL">
</video>
```

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

### Player-specific onResponse hook example

Source: https://github.com/videojs/http-streaming/blob/main/README.md

This example illustrates how to add a player-specific onResponse hook to access request, error, and response data.

```javascript
player.on('xhr-hooks-ready', () => {
  const playerResponseHook = (request, error, response) => {
    const bar = response.headers.foo;
  };
  player.tech().vhs.xhr.onResponse(playerResponseHook);
});
```

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

### Demo Initialization

Source: https://github.com/videojs/http-streaming/blob/main/index.html

This snippet shows how to start the demo and access the player instance for further manipulation.

```javascript
var unitTestLink = document.getElementById('unit-test-link'); // removal test run link on netlify, as we cannot run tests there. if ((/netlify.app/).test(window.location.host)) { unitTestLink.remove(); } window.startDemo(function(player) { // do something with setup player });
```

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

### Video.js Player Setup for HLS

Source: https://github.com/videojs/http-streaming/wiki/A-Walk-Through-VHS

Setting up a Video.js player to handle HLS content by including Video.js scripts and adding the 'video-js' class to the video tag.

```html
<link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>

<video id="myPlayer" class="video-js">
  <source src="http://example.com/manifest.m3u8" type="application/x-mpegURL">
</video>
```

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

### Global onRequest hook with beforeSend example

Source: https://github.com/videojs/http-streaming/blob/main/README.md

Example of a global onRequest hook that includes a beforeSend callback to modify the xhr object for all players.

```javascript
// Global request callback defining beforeSend function, will affect every player.
const globalXhrRequestHook = (options) => {
  options.beforeSend = (xhr) => {
    xhr.setRequestHeader('foo', 'bar');
  };
  return options;
};
videojs.Vhs.xhr.onRequest(globalXhrRequestHook);
```

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

### Player-specific onRequest hook with beforeSend example

Source: https://github.com/videojs/http-streaming/blob/main/README.md

This example shows how to add a player-specific onRequest hook that includes a beforeSend callback to modify the xhr object.

```javascript
player.on('xhr-hooks-ready', () => {
  const playerXhrRequestHook = (options) => {
    options.beforeSend = (xhr) => {
      xhr.setRequestHeader('foo', 'bar');
    };
    return options;
  };
  player.tech().vhs.xhr.onRequest(playerXhrRequestHook);
});
```

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

### HTML Source Tag Example

Source: https://github.com/videojs/http-streaming/blob/main/docs/a-walk-through-vhs.md

An example of an HTML <source> tag used to specify a video stream, which VHS uses to identify and handle the source.

```html
<video-js id="myPlayer" class="video-js" data-setup='{}'>
  <source src="http://example.com/manifest.m3u8" type="application/x-mpegURL">
</video-js>
```