Responsive browser-based video recording and playbackOliver FriedmannCTO & Founder, Ziggeo

@oliverfriedmann

Why not just the tag?

No control over controls.

SafariFirefoxChrome / Opera

Video events is a cross-browser mess.

Even new browsers can only play MP4s.MP43-5221-473.1-93-3712-149-115.1-9.34.3-6.0WEBM6-524-47No10.6-37NoNoNo4.3-6.0OGV3-523.5-47No10.5-37NoNoNoNo

Mobile WebDesktop Web

Existing players dont behave like normal HTML

And if you think playback is broken, here is recording.HTML 5YesYesNoYesYesNoNo5.0MediaRecorderNoYesNoNoNoNoNonoFlashYesYesYesYesYesYesNoNoCaptureNoNoNoNoNoNoYesYes

Mobile WebDesktop Web

Announcing: BetaJS Player / Recorder

BetaJS Video Player

BetaJS Video Recorder

(open source coming soon)For cloud-based version, visit http://ziggeo.com

BetaJS Player / Recording Browser CompatibilityPlayback15-524-445-918-3712-148-117.0-9.04.0-6.0Recording15-524-445-918-3712-148-117.0-9.04.0-6.0

(Includes falling back to Flash if necessary)Mobile WebDesktop Web

Introducing:Open-Source BetaJS Framework

What, yet another framework?

Building Web ComponentsExtend websites by components like video players

CSS of host website + embeddings dont play well

JS library dependencies of host + embed dont play well

because different libraries clash

because different versions of the same library clash

Why iFrames are no good.Host website cannot properly communicate with embedding

Additional round trips for every embed

Extending embeddings via host website cumbersome

Combining frameworks is not easy.

(Host website must explicitly wrap calls to make it work.)

http://stackoverflow.com/questions/20947191/using-reactjs-with-angularjs

BetaJS Design PrinciplesNo outside dependencies (currently: jQuery but will eliminate in future release)Play nicely with other frameworksLoosely coupled and modularizedAllow multiple versions to be present at the same timeDont impose page/code structureLayered customizabilityMinimal footprint

Framework Overviewbetajs-scopedscoped loading of modules and dependenciesbetajshelper functions and classesbetajs-browserbrowser-specific methodsbetajs-dynamicsdynamic DOM templating enginebetajs-flashFlash-JavaScript bridging frameworkbetajs-mediaa JavaScript media framework (video playback, video recording)betajs-media-componentsfull video player / video recorder UI components

FootprintModuleSize (kb)Minified (kb)betajs-scoped189betajs214120betajs-browser6439betajs-dynamics7542betajs-flash117betajs-media6636betajs-media-components3024Total478277Compiled for Player301172VideoJS697250JWPlayer?227

Customization DimensionsStyles(Namespaced) CSSUIHTML Templating SystemViewsJS Controller System (Dynamics)ThemesBundling of Styles, UI, ViewsOutside ControlExposed Methods + EventsLocalesString assets for language support

(Customization supports granular changes at each layer)

Customizing CSS

Customizing Templates

Creating Themes

Adding Locales

Customizing the State MachineVideoPlayer.PosterReadyVideoPlayer.LoadVideoclick playMyPlayer.PosterReadyextendsMyPlayer.Prerollclick playpreroll completeVideoPlayer ClassMyPlayer Class

Show Demo

Open-Source Framework

Apache 2.0 License

Commercial Cloud Video & Backend Support

http://betajs.com

Oliver Friedmann

Founder & CTO, Ziggeo

oliver@ziggeo.com