odd.js

An HTML5 Flash Video (FLV) Player written in pure JavaScript without Flash! Not depends on wasm! Extremely tiny (only 225k) but powerful!

Feature

• FLV container with H.264 + AAC / MP3 codec playback
• Multipart segmented video playback
• HTTP FLV low latency live stream playback
• FLV over WebSocket live stream playback
• Compatible with Chrome, FireFox, Safari 10, IE11 and Edge
• Extremely low overhead, and hardware accelerated by your browser!
• FMP4 low latency live stream playback
• webrtc low latency live stream playback
• im and chat, etc.
• screenshot

Usage

npm install --save [email protected]

Using Vue sample

<template>
    <div>
        <div ref='player' id='player' style='margin: 40px auto 0; width: 100%; height: 400px; max-width: 640px; top: 0; left: 0;'>

        </div>
        <div class='input-container' style='width: 100%; max-width: 640px;'>
            <span>
                <input id='url' autocapitalize='off' v-model='url'>
            </span>
            <a class='btn red' @click='onPlayClick'>Play</a>
        </div>
    </div>
</template>

<script>
import { odd } from 'odd.js'
import 'odd.js/css/style.css'
import 'odd.js/css/odd.player.classic.css'

export default {
  name: 'App',
  components: {
  },
  data () {
    return {
        index: 0,
        ui: null,
        url: 'http://172.16.2.81:59301/live/10002.flv',
        posterUrl: 'http://172.16.2.81:9000/bucket001/20220129/dataSet_1487324216968613890/dataSetVersion_1487324216968613890/1487324346400641033.jpg',
    }
  },
  mounted () {
    this.initPlayer();
  },
  methods: {
    initPlayer() {
        const player = document.getElementById('player');
        player.innerHTML = '';

        var ui = odd.player.ui.create({ mode: 'file' });

        this.ui = ui;

        ui.addGlobalListener(console.log);
        ui.addEventListener('ready', this.onReady);
        ui.addEventListener('click', this.onClick);
        ui.addEventListener('screenshot', this.onScreenshot);
        ui.addEventListener('error', console.error);
        ui.setup(player, {
            autoplay: false,
            bufferLength: 0.5,       // sec.
            lowlatency: true,        // ll-dash, ll-hls, ll-flv/fmp4 (auto reduce latency due to cumulative ack of tcp)
            maxBufferLength: 1.5,    // sec.
            maxRetries: 0,           // maximum number of retries while some types of error occurs. -1 means always
            mode: 'live',            // live, vod
            module: 'FLV',           // SRC, FLV, FMP4, DASH*, HLS*, RTC
            objectfit: 'contain',    // fill, contain, cover, none, scale-down
            retrying: 0,             // ms. retrying interval
            loader: {
                name: 'auto',
                mode: 'cors',        // cors, no-cors, same-origin
                credentials: 'omit', // omit, include, same-origin
            },
            sources: [{
                file: this.url,
                module: 'FLV',
                label: 'http-flv',
                default: true,
             }],
            plugins: [{
                kind: 'Poster',
                file: this.posterUrl,
                cors: 'anonymous',    // anonymous, use-credentials
                objectfit: 'contain', // fill, contain, cover, none, scale-down
                visibility: true,
            }, {
                kind: 'Display',
                layout: '[Button:play=][Button:waiting=][Label:error=][Panel:info=][Panel:stats=]',
                ondoubleclick: 'fullscreen',
                visibility: true,
            }, {
                kind: 'Controlbar',
                layout: '[Slider:timebar=Preview]|[Button:play=播放][Button:pause=暂停][Button:reload=重新加载][Button:stop=停止][Label:quote=Live][Label:time=00:00/00:00]||[Button:capture=截图][Button:mute=静音][Button:unmute=取消静音][Slider:volumebar=80][Select:definition=清晰度][Button:fullscreen=全屏][Button:exitfullscreen=退出全屏]',
                autohide: false,
                visibility: true,
            }],
        });
    },
    onPlayClick() {
        this.ui.play(this.url);
    },
    onReady(e) {
        console.log(e);
    },

    onClick(e) {
        switch (e.data.name) {
            case 'report':
                this.ui.logger.flush();
                break;
        }
    },

    onScreenshot(e) {
        var arr = e.data.image.split(',');
        var ret = arr[0].match(/^data:(image\/(.+));base64$/);
        if (ret === null) {
            console.error('The string did not match the expected pattern.');
            return;
        }

        var link = document.createElement('a');
        link.href = e.data.image;
        link.download = 'screenshot-' + odd.utils.padStart(this.index++, 3, '0') + '.' + ret[2];
        link.click();
    }
  }
}
</script>

<style >
</style>