omakaseplayer

Open source JavaScript player for building frame accurate video experiences

Why Omakase Player?

Frame accurate playback and review of temporal metadata are essential to the creation and distribution of video. To help the industry, we developed Omakase Player to address use cases in broadcast, video QC and editorial. We look forward to seeing the player used by the community in new and innovative projects.

Core Player

  • Frame accurate video playback

  • Built using HTML5 & Media Source Extensions API

  • HLS support and extendable to other streaming protocols

  • Mappable to professional keyboards and jog/shuttle controls

  • Visualization of subtitles

  • Adjustable playback rate

Timeline

  • Multi-track timeline with unlimitied depth

  • Interactive segment and point visualization

  • Presentation of thumbnail tracks

  • Visualization of subtitles and waveforms

  • Line and bar chart presentation of data

VU Meter

  • Visualize levels of multi-channel audio tracks

  • Build-on Web Audio API

Audio Router (Coming…)

  • Map input channels to output channels

  • Isolate individual channels

  • Dynamically detects available hardware channels

  • QC complex sound fields on stereo equipment

Marker List (Coming…)

  • Organizes segments into cut-lists

  • Keyframe presentation

  • Preview scrubbing

Player initialization code sample

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
        <script src="https://cdn.jsdelivr.net/npm/@byomakase/omakase-player/dist/omakase-player.umd.js"></script>
        <script>
            function initPlayer() {
                let omakasePlayer = new omakase.OmakasePlayer({
                    videoHTMLElementId: 'omakase-player'
                })
                omakasePlayer.loadVideo('https://my-server.com/myvideo.m3u8', 25).subscribe();
                omakasePlayer.createTimeline({
                    thumbnailVttUrl: 'https://my-server.com/mythumb.vtt'
                }).subscribe();
            }
        </script>
    </head>
    <body onload="initPlayer()">
        <div id="omakase-player"></div>
        <div id="omakase-timeline"></div>
    </body>
</html>

Powered ByOmakase