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.

Use CaseS and DEMOs

Player with Default Theme

A frame-accurate player with standard controls is available out-of-the-box. Stock controls can be removed and/or customized via CSS.

VU Meter and Router

Playback, visualization and manage complex, multi-track sound fields. Audio can be source via main media and/or sidecars.

Marker Track Visualization

Time-based metadata consisting of points and/or segments can be visualized and edited within the Player and/or Marker List component.

Timeline

The Timeline component can be used to visualize marker tracks and graph telemetry. I can also be used to text and thumbnail tracks.

Stamp Player

Use the Omakase Player “stamp” theme to playback video and visualize time-based metadata when presenting the results of a search.

Core Player

  • Frame accurate video playback

  • Built using HTML5 & Media Source Extensions API

  • HLS & progressive MP4 support with extensibility to other streaming protocols

  • Mappable to professional keyboards and jog/shuttle controls

  • Visualization of subtitles

  • Adjustable playback rate

Timeline

  • Multi-track timeline with unlimited depth

  • Interactive segment and point visualization

  • Presentation of thumbnail tracks

  • Visualization of subtitles and waveforms

  • Line , bar and LED chart presentation of data

VU Meter

  • Visualize levels of multi-channel audio tracks

  • Customizable look-and-feel

  • Support for embedded and side car audio tracks

  • Build-on Web Audio API

Audio Router

  • Map input channels to output channels

  • Isolate individual channels

  • Dynamically detects available hardware channels

  • QC complex sound fields on stereo equipment

  • Extensible routing matrix

  • Support for embedded and side care audio tracks

Marker List

  • Organizes segments into cut-lists

  • Keyframe presentation

  • Extensible styling and metadata

  • Timeline integration

Build your frame accurate experience from components or get started with the Reference Player

Key Features:

  • Multi-Track Media
    Review media bundles consisting of multiple audio and subtitle tracks

  • Visualization Options
    Multiple ways to review analysis datasets, segmentation information and other forms of temporal metadata

  • Audio Review
    Support for stereo and 5.1 audio, VU meter and waveform visualization, ability to isolate individual audio channels

  • Tech Metadata
    Presents source information and technical metadata to support troubleshooting and deeper analysis

  • Extensible Design
    Angular web app built around a modular UX. Easy to customize or embed within an existing business process

  • Data Driven
    UX driven from information extracted from a standard HLS manifest and an open JSON document structure

  • Easy to Deploy
    Simple to deploy in the cloud or host on-prem. Requires a standard web server

  • Open Source
    Apache License. Free to use, modify or embed within your supply chain

Omakase Player is SIMPLE TO BOOTSTRAP AND INiTIALIZE

Player initialization SAMPLE

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@byomakase/omakase-player@0.19.1/dist/omakase-player.umd.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@byomakase/omakase-player@0.19.1/dist/style.css"
    />
    <script>
      function initPlayer() {
        let omakasePlayer = new omakase.OmakasePlayer({
          mediaChrome: { visibility: "enabled" }
        });
        omakasePlayer.loadVideo("https://github-media.assets.byomakase.org/meridian_en_720p24.mp4");

        omakasePlayer.createTimeline({
            thumbnailVttUrl: "https://github-media.assets.byomakase.org/meridian_en_720p24/thumbnails/thumbnails.vtt",
          }).subscribe((timeline) => {
            let thumbnailLane = new omakase.ThumbnailLane({
              description: "Thumbnails",
              vttUrl: "https://github-media.assets.byomakase.org/meridian_en_720p24/thumbnails/thumbnails.vtt"
            });
            timeline.addTimelineLane(thumbnailLane);
          });
      }
    </script>
  </head>

  <body onload="initPlayer()">
    <div id="omakase-player"></div>
    <div id="omakase-timeline"></div>
  </body>
</html>