### Running flv.js in development mode

Source: https://github.com/bilibili/flv.js/blob/master/README.md

Installs development dependencies (npm ci) and starts a development server or watcher (npm run dev) for debugging flv.js, automatically rebuilding on file changes.

```bash
npm ci
npm run dev
```

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

### Basic FLV Playback with flv.js

Source: https://github.com/bilibili/flv.js/blob/master/README.md

Demonstrates how to initialize flv.js, check for browser support, create a player instance for an FLV URL, attach it to an HTML <video> element, and start playback. Requires the flv.min.js script to be included.

```html
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>
```

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

### Building flv.js from source

Source: https://github.com/bilibili/flv.js/blob/master/README.md

Commands to install development dependencies (npm ci), build a debug version (npm run build:debug), and build a minimized release version (npm run build) of the flv.js library.

```bash
npm ci
npm run build:debug
npm run build
```

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

### Installing flv.js with npm

Source: https://github.com/bilibili/flv.js/blob/master/README.md

Installs the flv.js library as a project dependency using the npm package manager. The --save flag adds it to the project's package.json.

```bash
npm install --save flv.js
```

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

### Specific CORS Allow Origin Example - HTTP

Source: https://github.com/bilibili/flv.js/blob/master/docs/cors.md

Example showing how to allow a specific origin (e.g., http://flvplayback.com) to access the FLV resource. Replace the example origin with the actual origin of the web page requesting the resource.

```HTTP
Access-Control-Allow-Origin: http://flvplayback.com
```

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

### Sample MediaDataSource Configuration for Multipart Playback (JSON)

Source: https://github.com/bilibili/flv.js/blob/master/docs/multipart.md

This snippet provides a concrete example of a `MediaDataSource` object configured for multipart playback. It demonstrates how to list multiple FLV segments with their specific duration, filesize, and URL within the `segments` array.

```JSON
{
    "type": "flv",
    "duration": 1373161,
    "segments": [
        {
            "duration": 333438,
            "filesize": 60369190,
            "url": "http://127.0.0.1/flv/7182741-1.flv"
        },{
            "duration": 390828,
            "filesize": 75726439,
            "url": "http://127.0.0.1/flv/7182741-2.flv"
        },{
            "duration": 434453,
            "filesize": 103453988,
            "url": "http://127.0.0.1/flv/7182741-3.flv"
        },{
            "duration": 214442,
            "filesize": 44189200,
            "url": "http://127.0.0.1/flv/7182741-4.flv"
        }
    ]
}
```

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

### Get flv.js Feature List - JavaScript

Source: https://github.com/bilibili/flv.js/blob/master/docs/api.md

Retrieves an object detailing the features supported by flv.js in the current browser environment. The returned object is of type `FeatureList`.

```JavaScript
function getFeatureList(): FeatureList;
```

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

### Server Preflight OPTIONS Response Headers - HTTP

Source: https://github.com/bilibili/flv.js/blob/master/docs/cors.md

Required CORS headers for the server to respond successfully to a preflight OPTIONS request. These headers grant permission for the browser to send the subsequent GET request with the specified methods and headers (including Range).

```HTTP
Access-Control-Allow-Origin: <your-origin> | *
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Headers: range
```

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

### Browser Preflight OPTIONS Request Headers - HTTP

Source: https://github.com/bilibili/flv.js/blob/master/docs/cors.md

Headers sent by the browser in a preflight OPTIONS request when performing a cross-origin Range seek. These headers inform the server about the actual request method (GET) and headers (Range) that will follow.

```HTTP
Access-Control-Request-Headers: range
Access-Control-Request-Method: GET
```

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

### Creating flv.js Player Instance

Source: https://github.com/bilibili/flv.js/blob/master/docs/api.md

Creates a player instance based on the provided `mediaDataSource` configuration. The type of player (`FlvPlayer` or `NativePlayer`) is determined by the `type` field in `mediaDataSource`. An optional `config` object can be provided for additional player settings.

```javascript
function createPlayer(mediaDataSource: MediaDataSource, config?: Config): Player;
```

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

### Defining Player Interface (TypeScript)

Source: https://github.com/bilibili/flv.js/blob/master/docs/api.md

Defines the abstract Player interface, outlining the core methods and properties required for any player implementation in flv.js. It includes methods for lifecycle management, event handling, media attachment, playback control, and properties for media information and statistics.

```typescript
interface Player {
    constructor(mediaDataSource: MediaDataSource, config?: Config): Player;
    destroy(): void;
    on(event: string, listener: Function): void;
    off(event: string, listener: Function): void;
    attachMediaElement(mediaElement: HTMLMediaElement): void;
    detachMediaElement(): void;
    load(): void;
    unload(): void;
    play(): Promise<void>;
    pause(): void;
    type: string;
    buffered: TimeRanges;
    duration: number;
    volume: number;
    muted: boolean;
    currentTime: number;
    mediaInfo: Object;
    statisticsInfo: Object;
}
```

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

### Defining flvjs.FlvPlayer Interface (TypeScript)

Source: https://github.com/bilibili/flv.js/blob/master/docs/api.md

Defines the FlvPlayer interface, which extends the base Player interface. This interface represents the player specifically designed for FLV playback and can be instantiated directly using the 'new' operator.

```typescript
interface FlvPlayer extends Player {}
```

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

### Defining MediaDataSource Structure for Multipart Playback (JSON)

Source: https://github.com/bilibili/flv.js/blob/master/docs/multipart.md

This snippet shows the required structure for the `MediaDataSource` object when configuring multipart playback in flv.js. It includes the type, optional global properties like duration and CORS settings, and a required `segments` array detailing each FLV file with its duration, filesize, and URL.

```JSON
{
    // Required
    "type": "flv",  // Only flv type supports multipart playback

    // Optional
    "duration": 12345678,  // total duration, in milliseconds
    "cors": true,
    "withCredentials": false,

    // Optional
    // true by default, do not indicate unless you have to deal with audio-only or video-only stream
    "hasAudio": true,
    "hasVideo": true,

    // Required
    "segments": [
        {
            "duration": 1234,  // in milliseconds
            "filesize": 5678,  // in bytes
            "url": "http://cdn.flvplayback.com/segments-1.flv"
        },
        {
            "duration": 2345,
            "filesize": 6789,
            "url": "http://cdn.flvplayback.com/segments-2.flv"
        },
        {
            "duration": 4567,
            "filesize": 7890,
            "url": "http://cdn.flvplayback.com/segments-3.flv"
        }
        // more segments...
    ]
}
```

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

### Configuring HTTP FLV Live Source in flv.js

Source: https://github.com/bilibili/flv.js/blob/master/docs/livestream.md

This configuration object defines a MediaDataSource for an HTTP FLV live stream. It specifies the source type as 'flv', indicates that it is a live stream using 'isLive: true', and provides the URL of the stream.

```js
{
    // HTTP FLV
    "type": "flv",
    "isLive": true,
    "url": "http://127.0.0.1:8080/live/livestream.flv"
}
```

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

### Check flv.js Browser Support - JavaScript

Source: https://github.com/bilibili/flv.js/blob/master/docs/api.md

Checks if the current browser environment supports basic flv.js playback functionality. Returns a boolean value indicating support.

```JavaScript
function isSupported(): boolean;
```

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

### Configuring WebSocket FLV Live Source in flv.js

Source: https://github.com/bilibili/flv.js/blob/master/docs/livestream.md

This configuration object defines a MediaDataSource for an FLV live stream delivered over WebSocket. It sets the source type to 'flv', marks it as a live stream with 'isLive: true', and provides the WebSocket URL.

```js
{
    // FLV over WebSocket
    "type": "flv",
    "isLive": true,
    "url": "ws://127.0.0.1:9090/live/livestream.flv"
}
```

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

### Defining flvjs.NativePlayer Interface (TypeScript)

Source: https://github.com/bilibili/flv.js/blob/master/docs/api.md

Defines the NativePlayer interface, which extends the base Player interface. This wrapper is used for browser's native HTMLVideoElement playback without MediaSource, making it useful for single-part MP4 file playback.

```typescript
interface NativePlayer extends Player {}
```

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

### Defining flvjs.LoggingControl Interface (TypeScript)

Source: https://github.com/bilibili/flv.js/blob/master/docs/api.md

Defines the global LoggingControl interface for flv.js, providing static properties and methods to manage the log verbosity level. It allows configuring logging behavior, applying settings, and adding/removing log listeners.

```typescript
interface LoggingControl {
    forceGlobalTag: boolean;
    globalTag: string;
    enableAll: boolean;
    enableDebug: boolean;
    enableVerbose: boolean;
    enableInfo: boolean;
    enableWarn: boolean;
    enableError: boolean;
    getConfig(): Object;
    applyConfig(config: Object): void;
    addLogListener(listener: Function): void;
    removeLogListener(listener: Function): void;
}
```

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

### Basic CORS Allow Origin Header - HTTP

Source: https://github.com/bilibili/flv.js/blob/master/docs/cors.md

Specifies the origin(s) allowed to access the resource. Can be a specific origin or a wildcard (*). This header must be included in the server's response for cross-origin requests.

```HTTP
Access-Control-Allow-Origin: <your-origin> | *
```

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

### Wildcard CORS Allow Origin Header - HTTP

Source: https://github.com/bilibili/flv.js/blob/master/docs/cors.md

Allows access to the FLV resource from any origin. Use with caution as it disables origin restrictions. This is often used for public resources.

```HTTP
Access-Control-Allow-Origin: *
```

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

### Expose Content-Length Header for Static FLV - HTTP

Source: https://github.com/bilibili/flv.js/blob/master/docs/cors.md

Required for static FLV file playback if the filesize is not provided in the MediaDataSource object. This header allows the browser to read the Content-Length response header for progress tracking or other purposes.

```HTTP
Access-Control-Expose-Headers: Content-Length
```

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

### CORS Allow Origin for Redirects (Origin Null) - HTTP

Source: https://github.com/bilibili/flv.js/blob/master/docs/cors.md

Specifies the Access-Control-Allow-Origin header required on the redirect target server when the browser sends 'Origin: null' during a redirect. This typically happens after a 3xx redirection according to CORS policy.

```HTTP
Access-Control-Allow-Origin: null | *
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.