DOCSEARCHbyAlgolia
Submit Docs

flv.js

repository·master·Indexed 12 days ago

https://github.com/bilibili/flv.js

An HTML5 Flash Video (FLV) player written in pure JavaScript that uses Media Source Extensions (MSE) to play FLV streams without Flash by transmuxing them into fragmented MP4 segments. Version 1.6.2 supports HTTP and WebSocket livestreams, multipart playback, and provides a comprehensive API for player control, event handling, and CORS configuration.

Tokens
5.9K
Snippets
24
Records
30
Agent score
98%

What's inside flv.js

  3. Play an HTTP FLV livestream

    master

    To play a livestream using flv.js, you must provide a MediaDataSource object where the type is set to 'flv' and the isLive property is set to true. This tells the player to treat the source as a continuous live stream rather than a seekable file.

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

  4. Configure CORS for cross-origin FLV playback

    master

    To play an FLV stream from a different origin than your web application, the video server must respond with the Access-Control-Allow-Origin header. You can specify your specific origin or use a wildcard * to allow any origin.

    Example: If your site is http://flvplayback.com and the video is at http://cdn.flvplayback.com, the CDN must return: Access-Control-Allow-Origin: http://flvplayback.com or Access-Control-Allow-Origin: *.

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

  5. Handle CORS with 301/302 redirects

    master

    If your video server uses 3xx redirection, the redirection response itself must contain the Access-Control-Allow-Origin header.

    Note: Browsers may send Origin: null in redirected requests due to current CORS policies. To support this, your edge server should respond with: Access-Control-Allow-Origin: null or Access-Control-Allow-Origin: *.

    Alternatively, you can dynamically determine the allowed origin by reading the Origin request header.

    Access-Control-Allow-Origin: null | *

  6. Get started with flv.js playback

    master

    To play an FLV stream, first check if the browser supports flv.js using flvjs.isSupported(). Then, create a player instance using flvjs.createPlayer(), attach it to an HTML5 <video> element, and call .load() and .play().

    <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>

  7. Configure CORS for static FLV file playback

    master
    When playing static FLV files, it is recommended to include the Access-Control-Expose-Headers: Content-Length header in the server response. Alternatively, you must provide the accurate file size manually in the MediaDataSource object.
    Access-Control-Expose-Headers: Content-Length

  8. Configure Preflight OPTIONS for Range seek

    master

    Using Range seek for cross-origin FLV files triggers a browser Preflight OPTIONS request because flv.js adds a Range header.

    Your server must be configured to handle the OPTIONS request and respond with the following headers:

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

  9. Play an FLV livestream over WebSocket

    master

    You can also play live streams delivered via WebSocket by setting the url to a ws:// or wss:// endpoint and ensuring isLive: true is specified in the MediaDataSource.

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

  11. Implement multipart playback with MediaDataSource

    master

    To enable multipart playback (playing a video split into multiple files), you must pass a MediaDataSource object to the FlvPlayer constructor.

    Requirements:

    • The type must be set to "flv" (this is the only type that supports multipart playback).
    • You must provide an accurate duration for every segment in the segments array.

    MediaDataSource Structure:

    • type (Required): Set to "flv".
    • duration (Optional): Total duration of the entire playlist in milliseconds.
    • cors (Optional): Boolean indicating if CORS is required.
    • withCredentials (Optional): Boolean for credentialed requests.
    • hasAudio (Optional): Boolean (defaults to true). Set to false if the stream is video-only.
    • hasVideo (Optional): Boolean (defaults to true). Set to false if the stream is audio-only.
    • segments (Required): An array of segment objects, each containing:
      • duration: Segment duration in milliseconds.
      • filesize: Segment size in bytes.
      • url: The URL of the segment file.
    const player = flvjs.createPlayer({
    type: 'flv',
    duration: 12345678,
    cors: true,
    withCredentials: false,
    hasAudio: true,
    hasVideo: true,
    segments: [
        {
            "duration": 1234,
            "filesize": 5678,
            "url": "http://cdn.flvplayback.com/segments-1.flv"
        },
        {
            "duration": 2345,
            "filesize": 6789,
            "url": "http://cdn.flvplayback.com/segments-2.flv"
        }
    ]
});

  12. Configure CORS for FLV streams

    master
    If you are using a standalone video server to host FLV streams, you must configure the Access-Control-Allow-Origin header on that server to allow cross-origin resource fetching from your web application.