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>