Home

Awesome

aribb24.js npm

An HTML5 subtitle renderer.
It is alternative implementation for b24.js.

Feature

Special Thanks

Options

Build

Preparing

git clone https://github.com/monyone/aribb24.js
cd aribb24.js
yarn

Compiling aribb24.js library

yarn run build

Getting Started

with native player and hls.js (for id3 timed-metadata inserted stream)

<script src="hls.min.js"></script>
<script src="aribb24.js"></script>
<video id="videoElement"></video>
<script>
    var video = document.getElementById('videoElement');
    var videoSrc = 'something.m3u8';

    var renderer = new aribb24js.CanvasRenderer({
        // Options are here!

        // forceStrokeColor?: string,
        // forceBackgroundColor?: string,
        // normalFont?: string,
        // gaijiFont?: string,
        // drcsReplacement?: boolean
        enableAutoInBandMetadataTextTrackDetection: !Hls.isSupported(), // FRAG_PARSING_METADATA instead of auto detection
    });
    // renderer.attachMedia(video, subtitleElement) also accepted
    renderer.attachMedia(video);

    if (Hls.isSupported()) {
        var hls = new Hls();
        hls.on(Hls.Events.FRAG_PARSING_METADATA, function (event, data) {
            for (var sample of data.samples) {
                renderer.pushID3v2Data(sample.pts, sample.data);
            }
        }

        hls.loadSource(videoSrc);
        hls.attachMedia(video);
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = videoSrc;
    }

    video.play();
</script>

with video.js (for id3 timed-metadata inserted stream)

<link href="video-js.css" rel="stylesheet" />
<script src="video.min.js"></script>
<script src="aribb24.js"></script>
<video id="videoElement"></video>
<script>
    var video = document.getElementById('videoElement');
    var videoSrc = 'something.m3u8';

    var aribb24Renderer = new aribb24js.CanvasRenderer({
        // Options are here!

        // forceStrokeColor?: string,
        // forceBackgroundColor?: string,
        // normalFont?: string,
        // gaijiFont?: string,
        // drcsReplacement?: boolean
        useHighResTextTrack: true, // for IE11 (avoid video.js error on IE11)
    })

    var player = videojs(video);
    aribb24Renderer.attachMedia(video);
    document.getElementById('video').querySelector('.vjs-control-bar').style.zIndex = 1;

    const track = player.addTextTrack('subtitles', 'aribb24.js')
    if (track.mode === 'showing') {
        aribb24Renderer.show();
    } else {
        aribb24Renderer.hide();
    }

    player.textTracks().addEventListener('addtrack', function (event) {
        var track = event.track;
        if (track.label === 'Timed Metadata') {
            aribb24Renderer.setInBandMetadataTextTrack(track);
        }
    })

    track.addEventListener('modechange', function (event) {
        if (track.mode === 'showing') {
            aribb24Renderer.show();
        } else {
            aribb24Renderer.hide();
        }
    })

    player.src(videoSrc);
</script>

with shaka-player (for id3 timed-metadata inserted stream)

<script src="mux.min.js"></script>
<script src="shaka-player.ui.js"></script>
<link rel="stylesheet" href="controls.css">
<video id="videoElement"></video>
<script>
    var video = document.getElementById('videoElement');
    var videoSrc = 'something.m3u8';

    var aribb24Renderer = new aribb24js.CanvasRenderer({
        // Options are here!

        // forceStrokeColor?: string,
        // forceBackgroundColor?: string,
        // normalFont?: string,
        // gaijiFont?: string,
        // drcsReplacement?: boolean
    })

    shaka.polyfill.installAll();
    if (shaka.Player.isBrowserSupported()) {
        var player = new shaka.Player(video);
        aribb24Renderer.attachMedia(video);

        player.addEventListener('metadata', function (payload) {
            var startTime = data.startTime;
            var key = data.payload.key;

            if (key === 'PRIV') {
                var owner = data.payload.owner;
                var binary = data.payload.data;
                aribb24Renderer.pushID3v2PRIVData(startTime, owner, binary);
            } else if(key === 'TXXX') {
                var description = data.payload.description;
                var base64 = data.payload.data;
                aribb24Renderer.pushID3v2TXXXData(startTime, description, base64);
            }
        })
     }
</script>

with hls-b24.js (for private_stream_1 inserted stream)

<script src="hls.min.js"></script>
<script src="aribb24.js"></script>
<video id="videoElement"></video>
<script>
    var video = document.getElementById('videoElement');
    var hls = new Hls();
    hls.loadSource('something.m3u8')
    hls.attachMedia(video);
    video.play();

    var renderer = new aribb24js.CanvasRenderer({
      // Options are here!

      // forceStrokeColor?: string,
      // forceBackgroundColor?: string,
      // normalFont?: string,
      // gaijiFont?: string,
      // drcsReplacement?: boolean
    });
    renderer.attachMedia(video);
    // renderer.attachMedia(video, subtitleElement) also accepted

    hls.on(Hls.Events.FRAG_PARSING_PRIVATE_DATA, function (event, data) {
        for (var sample of data.samples) {
            renderer.pushData(sample.pid, sample.data, sample.pts);
        }
    }
</script>

Limitations