Web Video Players Architecture & Open Source Community

Video in TIB AV-Portal: Web Video Players Architecture & Open Source Community

Formal Metadata

Web Video Players Architecture & Open Source Community
In depth Video.js, JwPlayer, and Kaltura Player
Alternative Title
Open Media - Pen Video Players
Title of Series
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date
Production Year

Content Metadata

Subject Area
Architecture Presentation of a group File format Projective plane Open source Videoconferencing Bit Quicksort Videoconferencing Physical system
Android (robot) Slide rule Game controller Context awareness Web crawler Machine code Open source Multiplication sign Mobile Web Flash memory Maxima and minima Set (mathematics) Web browser Web 2.0 Revision control Expected value Architecture Data management Cross-site scripting Different (Kate Ryan album) Videoconferencing Software framework Configuration space MiniDisc Plug-in (computing) Condition number Computer architecture Mobile Web Default (computer science) Projective plane Open source Shared memory Bit Limit (category theory) Digital rights management Software Integrated development environment Personal digital assistant Normal (geometry) Right angle Quicksort Videoconferencing Physical system Fingerprint
Touchscreen Connectivity (graph theory) Disintegration Demo (music) Open source Visual system Planning Special unitary group Mereology Template (C++) Number Architecture Process (computing) Logic Data structure Escape character Videoconferencing Plug-in (computing) Condensation Physical system
Beat (acoustics) Theory of relativity Interior (topology) Adaptive behavior Open source Architecture Type theory Event horizon Videoconferencing Video game Multimedia Theorem Endliche Modelltheorie Videoconferencing Extension (kinesiology) Computing platform Hydraulic jump
Overlay-Netz Architecture Game controller Machine code Integrated development environment Logic Open source Videoconferencing Quicksort Videoconferencing Simulation System call
Architecture Slide rule Software development kit Functional (mathematics) NP-hard Integrated development environment Information Server (computing) Multiplication sign Open source Code Videoconferencing
Web 2.0 Architecture Open source Videoconferencing Open set Videoconferencing
Architecture Forcing (mathematics) Projective plane Open source Videoconferencing Right angle Web browser Videoconferencing
Architecture Building Flash memory Open source Videoconferencing Videoconferencing Arithmetic progression Graph coloring
Point (geometry) Building Software developer Projective plane Open source Discrete element method Computer programming Element (mathematics) Architecture Core dump Order (biology) Videoconferencing Videoconferencing Family
Architecture Multiplication sign Projective plane Order (biology) Open source Videoconferencing Videoportal Website Videoconferencing Computing platform Power (physics)
Group action View (database) Patch (Unix) Range (statistics) Drop (liquid) Twitter Revision control Architecture Different (Kate Ryan album) Software Core dump Videoconferencing Cuboid Area Projective plane Open source Core dump Benutzerhandbuch Data management Process (computing) Order (biology) Revision control Website Musical ensemble Videoconferencing Arithmetic progression
Default (computer science) Building Dependent and independent variables Game controller Open source Control flow Streaming media Revision control Architecture Mathematics Revision control Website Videoconferencing Extension (kinesiology) Plug-in (computing)
Implementation Building Game controller Randomization Java applet Source code Compiler Rule of inference Variable (mathematics) Product (business) Architecture Algebraic closure Core dump Videoconferencing Multimedia Extension (kinesiology) Scripting language Area Digitizing Projective plane Open source Fitness function Shared memory Type theory Order (biology) Videoconferencing Library (computing) Extension (kinesiology)
Architecture Different (Kate Ryan album) Open source Videoconferencing
Email Standard deviation Group action Run time (program lifecycle phase) Structural load Code Perspective (visual) Web 2.0 Different (Kate Ryan album) Videoconferencing Multimedia Einbettung <Mathematik> Office suite Endliche Modelltheorie Logic gate God File format Structural load Software developer Multitier architecture Open source Shared memory Internet service provider Infinity Bit Type theory Process (computing) Internet service provider Volumenvisualisierung Website Arithmetic progression Writing Asynchronous Transfer Mode Point (geometry) Slide rule Random number Implementation Open source Connectivity (graph theory) Flash memory Streaming media Web browser Event horizon Number Element (mathematics) Architecture Natural number Energy level Configuration space Data structure Plug-in (computing) Computer architecture Game controller Multiplication Demo (music) State of matter Content (media) Denial-of-service attack Web browser Hypermedia Computing platform Videoconferencing
Connectivity (graph theory) Flash memory Control flow Web browser Computer icon Neuroinformatik Architecture Casting (performing arts) Electronic visual display Multimedia Endliche Modelltheorie Computer architecture Social class Touchscreen Demo (music) Software developer Open source Shared memory Bit Cartesian coordinate system Hypermedia Software Logic Telecommunication Internet service provider Iteration Quicksort Videoconferencing Arithmetic progression Family Routing Near-ring Asynchronous Transfer Mode
Architecture Ad serving Personal digital assistant State of matter Open source Multimedia Web browser Videoconferencing Cartesian coordinate system Virtual memory
Functional (mathematics) Multiplication Theory of relativity Open source Software developer Projective plane Open source Electronic mailing list Architecture Repository (publishing) Term (mathematics) Videoconferencing Data conversion Quicksort Videoconferencing Sinc function Form (programming)
Computer chess Group action Machine code INTEGRAL View (database) Multiplication sign Source code Insertion loss Computer programming Software bug Facebook Different (Kate Ryan album) Core dump Multimedia Extension (kinesiology) Area File format Reflection (mathematics) Open source Shared memory Maxima and minima Right angle Quicksort PC Card Trail Implementation Game controller Divisor Web browser Attribute grammar Product (business) Twitter Architecture Term (mathematics) Googol Software testing Form (programming) User interface Shift operator Standard deviation Distribution (mathematics) Projective plane Content (media) Mathematical analysis Incidence algebra Limit (category theory) Word Software Personal digital assistant Network topology Object (grammar) Videoconferencing Library (computing)
so the visible coming in but will will get started doing this is this is the player panel
I wouldn't take an in-depth look at JW counter and video js the
and this is sort of a the format is basically will give us 10 minutes presentation of each of the toxin in breach of the players and sort of open up for questions and across the various projects and so we'll start with the culture player you can hear me very well so there's no there's no microphone but all speak up a bit more basically will will have about 10 minutes of each project and then the a open up for
questions and will start 1st with the
counter player so was the the culture player
Michael bail is the thai and we work with culture of the next slide and culture played toolkit will we give a quick overview the architecture talk about across player experiences and then sort of the open source community and and sort of our documentation of the project itself but and as we all know know small 5 1 out against flash while back and now we sort of we know have new new set of problems and new challenges sort of the nodes targeting a lot of different devices but supporting the sort of fragmented mobile ecosystem of devices while while desktop it's you know 5 is largely but replaced the the our capabilities that were available and flash we still see a lotta gaps in the context of mobile offerings so here you see some of common limitations outlined by against mobile versus sort of a full-featured HTML 5 this is the best case ational 5 on the right hand side we would be like a crawl more of Firefox's you know later stage of my browser sort of what about you get 1 by default on a on a mobile safari or a mobile crown depending on the Android version of course In the gets it gets better over time for Android as as new features are introduced and I will go through all this but you know things like Autoplay is sort of a basic 1 from gas full-screen controls been able to control the but interfaces the but that DRM and basically the approach we've taken to deliver the experience across mobile is the cost going to a native environment and you know want to map essentially and we try to have the same player framework work against both native applications as well as sort of a nation of 5 based applications and so the the basic architecture is such that we can swap out a a native native player for a video tag of or in the case of the browser this would be a flash or your you're Silverlight plug-ins in cases where you need to deliver a feature Boulder browsers that don't have all the condition of its small 5 capabilities to deliver a particular who target feature and you can see here it it does broadens the and none of the features they can support as as you include these native packages that can sort of do native callouts to native bargains for whether it's DRM more you know adding a little Comcast greenery native share whatever may be a to what you want a will do that on and then here's another basically so going back to the player framework itself it's all sort of Jason driven CSS HTML templates which is sort of expect for of Modena web by HTML driven player it also has some extra features around sort of normalization which has been sort of a software HOS player i in the case of desktop flash and the software but it was clear friend wrote as well and then we'll will go into a little bit of sort of
how this uh J. Sun structure looks you notice quickly colonial condenser so but but is to give people an idea of the how that how those components come together within that within the player systems what was possible to the the right thank you Michael so uh basically uh in like a mention we have but to rob feature a layer of the up clear and on top of that we bill like jealousy plug-ins a HTML templating and c assisting older to configure of you I would look like they have a nice the studio that you can then like check it in the plug-ins and then you will see them on the screen this is part of the air In of the player back and it's all to now into a day some find that again to the 3rd us week which although the player which follow the plug-ins we from there on for this specific plan it's a plugin also have its own their job escape from where the logic In templates for each team and if it's visible air they're planning and then the is that's of course for the look and feel of course up there it's through handle multiscale experience so how do we that the 1st of all
that there must be responsive between every UI component have its own a priority if it's high medium or low and there and by that we can reduce the number of components for a smaller screen and of course the mold when the big 1 like TV or I've been versus iPhone 1 more effort to that we
have on the players of will the related video it's allow you to a and like see the experience when you finish the video is to go to the next 1 and some nice API you can do it from the inner contour plots fall from your platform you know to in the air in your type of related video the it up histamine so
we must support the uh in the end up discriminate unless of course due to the value the combined so we took data less and develop it also for left and for unrelated the today we can assume that the all the devices and beat that some more feature on top of the data less for example at sitting and of course the and big there's it's the now we're going to take the the big bubble for life including the in the array and there such as home lately in the stable the similar so you must do doing today theorem using the there's a media center included media extension so this is also a it in getting into just jump in the model of the introduction of OK so now we're going to quickly show is that the player
doing that native call out as as many people are
probably familiar if you play video from Safari on a I. phone you often that you'll get the sort of Apple you for the player and what will and mobile quickly show here is that this is sort of a safari or so that I was the survive other that we jumped into the counter a player and in a native application as so able to get you know your own custom controls notice this is not the same controls that Apple provides and notice you have sort of custom and image overlays that something that normally is is not too soon but doable in in an iPhone environment in this sort of enables user to seamlessly call out and get all your customizations or a business logic earlier Blair
functionality in the in the native environment and I think
with that we should the switch to the next there's a
lot more slides but we don't have we got on the thing I have gathered or a open-source community that supported red open-source conference in here of you know take of a project and get have a and there's a lot more information there about getting started with it and so on spend stuff all that fun stuff thank you and is it time thank you the the 1st thing to
the the and when you can do it person like this and all
that the this the I get the money and Steve phenomena talk quickly about video JSC but if it's an open web player it
the 1 with the C. Goals in the dolphins and that's where we have the rights to use that video the
major features of R & the the small 5 did you tied everywhere when the original goals for the project was to make that tag possible an older browsers like i 6 i 7 i 8 or add to use any force in Firefox less of an issue these days but is when the originals of project but I would
provide a common JavaScript API between the eyes of 5 flash and other players like you to Vimeo SoundCloud so but if you look into you kind of build on top of those players in 1 consistent API across those of we provide in the API looks very similar to the video many API so if you're familiar with that API if there with BGS again I you can style the player using
CSS as so if you change the background color of the progress bar and in 1 place or work whether it's more 5 is being used or flash A 1 of the players style at once using a technology that you used to use CSS and it works everywhere we have a pretty large community
of Developer Plugin so people building on top of the project so we try to keep the core project very small and we don't add many more features than what's the video element supports itself but that across all the different players and then all the additional features that my 1 adding and you'll find in our community of points and then finally I expected to license so that for years in where is this rod that could go history how the
projects started building it back in 2010 I was going through the and the Y Combinator start accelerator program prefer that it's we were building a start up called zinc order which is transcoding API and said during that so we went out California and rented this house in the middle of the woods you just can't hack away and and we stayed there for 4 months and miles away from anybody else and on the weekends my my co-founders would go home to their families but and have family so I stay in the house at all I myself on the weekends and out of sheer boredom I started this building controls on top of the sport by the Allman so that's essentially halberdiers as born the fast forward so you have a
couple years later cubbyhole Brightcove that's larger online video platform that powers a lot of the major video websites out there and have acquired Xanga order a start up and at the same time so that puts me full time on video Jessica retain the primary corporate sponsor of the video just project so I'm not working full time and it's a it's a great I never
existed a this is the maker and site but so who is using
video so actually that Twitter Dropbox did have Instagram tumbler a lot bigger brands along this just in the last year so it's a very exciting year for the project and uh yeah so there's it's been a really exciting cities other groups come on and you can start to contribute back to the price of a lot and you have become music this just use it but but they're actually like helping out contribute back so that's great and then that because of the acquisition of the Brightcove acquired the zinc order they're actually now implementing video just as their next-generation player so all of the websites that use Brightcove will also be using UGS in the near future so let's progress in that area and Systat's here and couple billion views a month as not including the Twitter's and drop box they use their own download version and the most interesting 1 is the the core contributors so we've had up 0 uh over 100 corpora contributors now which is what really Austin this last year we put a ton of work into you are processes around core requests and so issue management and all the stuff on did have that I can be really difficult the wheel this return to build the project and also missed community we've been working on that really hard in its sides payoffs in the most recent versions were an almost entirely brand new contributors people would never touch the project before I'm pretty proud of the progress made in that area and this with the community
looks like got a core team about 6 guys from different roles and and then as I said over a hundred different contributors from me of small patches to larger contributions from all long range
and then finally earlier version 5 . 0 were and gets a major changes coming at no major API breaking changes if you're building plug-ins on top of it but what about
that in a new default skin that were really excited about it said that we worked a lot on cleaning it up and uh extensibility so easier to add buttons to the control bar and uh and responsive design so like we been adding a player into response sites as they've been a big request the the adapter streams
support so both the dash and HLS and with building this in a way well we're still working on it were attending to build this in a way that we can share is much codes possible between dashed any to less than including across the media source extensions and flat so do as much of the work is written in Java Script and then just passing the bytes to where they need to go at the end so and that's a really fun project them and if you're interested in that type of streaming technology in would be instant get involved but please let me know but improve accessibility has been a lot of talk around accessibility in video players lately and we've certainly heard that and have been stepping apart in that area for 1 we've integrated with that Mozilla's BT TJs project which is a very Austin and implementation of the 2 digit of BTT captions in the browses the same library use inside a Firefox to display the captions and so were using that in the players well and and then just a minor fits we fix the tab order used to be that you have to the the the controls in the digestive going in a random order and we've fix that it's not that the and then finally I easy extension last year a said we're focused on the core codebase and like how you can do to do contribute back to it this next year really we focused on how you build on top of it with that things like a yeoman I plug generator and easier way to build design and share stands for the player and the as we focus for the next year and as it so that yeah as I said and it we are open to you any new contributors there as a guys if you're interested in helping out the product we like to hear from you just kind of I mean after this the rest of it if
the 1 this rule over there gives some other stragglers
a the difference is that the so and all that 1 last chance of the the OK
so money's published books here and here with
JW player and I have to be here so this has started and it's
actually just moved slide and buddhist slide
next slide i wanna share by the little about know player and you there is 1 of the
oldest open source video players on the web and was written 1st in 2005 so basically predated the widespread uh video adoption on the Web was the 1st player that wash with UT when they 1st washed out so write today as of last month we stream stream Data 17 billion video streams the 1 million unique viewers and across 3 million websites are so really pretty broad scope and so I'm going to talk to a little bit about the internal architecture of the players not so much features the her how it's constructed kind I level and happens on that later and you want more detail once essentially the way it works is 0 user comes in and a developer will configure player using some adjacent encounters player college infinite set up hello the declare will do is it'll determine the correct and set mode for uh for that uses content based on browser capabilities based on the content and so idle either set up in a flash plurinational 5 where additional fighters is the default and and have at that point that the user will have access to JavaScript API willful then translate down to the lower level player so there's 1 other 1 API and then the user will need to interact with and from a developers perspective you don't have to actually care whether or not users you your your content in Flash or additional 5 at behave the same way from API and and then what happens is that lower-level advanced will bubble up from the media through the lower the middle tier API through public API the the plug-in structure for the plugin architecture with no action there 2 different types of plug-ins for legacy reasons we got flash plug-ins which are loaded by the flash component and that allows users to put you i in flash up inferring in full-screen mode where additional elements in the longer visible and and I just applying at which sits on top of the scanner flooding API and so the only difference between doing a plug-in API was doing jobs that API and writing JavaScript is PPI that is embedded in your code and the plug-ins can be loaded office again uh at the at runtime so internally enable Flash an additional 5 modes of all we have is the concept of the media provide answers a model-view-controller the model is essentially controlled by the media so for example an additional 5 the model is the video tagging all events coming up video tag drive UI and and does so in in in In flashy of multiple media provider types of for example progressive download verses RTP verses you 2 so some sort of standardize is a model for the for consuming media and displaying the events in the the provider API off of the Prior interface rather as fairly simple it's you play pause C stop load and so essentially everything that different uh all all media requires those those are the basic tenets of that's what the primary care exposes and some examples of media providers RTP for those of you who are familiar with Flash video and etc. legacy the legacy stream format still fairly popular with senones uh although we're seeing much less much less adoption as users move into teacher less and so we have nature implementation for adaptive streaming in Flash loads and pick TTS does the trans marching into FOV and pushes it uh to flash render which works OK for now and we actually see quite quite a number of folks still on each a less even as dashes becoming more more popular but little sneaky here of a dash AS running in GATE player uh using the HTML 5 provider model and so we actually have wrapped gashed s here into a very simple me provider API and then introduce loading but yeah so the the demo gods have smiled upon me something come back here
for breaks down the my very quickly the fact that Steve contributed to suggest that share so we're actually having his his work great and so little little sneaky on art are next iteration of our of our architecture and so that flash inNational 5 running side-by-side works great but it's pretty copying have to implement features more than once which is a developer never like to see and so we made that some progress with the browsers some of the blockers for migrating entirely each 5 but for for the for the this to display of such as full screen support but in in their native full-screen rout of near brother full-screen plus and for delivery across and many more browsers Firefox included but that's really enable us to abandon the the flash rendering mode as a as a kind a full player experience and were able to just use the flash providers as dumb he promised media playback components and so essentially the reusing the HTML 5 a provider model will wrap it with a flash lower which will of the media only in that class display else whatever the you tag and rendering you that way and and that allows us to write an application logic once in JavaScript and flash can hopefully die a slow painful death and we can eliminate it from where you can have the that right as is the the answer have and so we have as a new features as the 1 featured in a little show which is um Comcast so that's it of cool and the device that 1 that we have really adapted quickly in and out of our thankful for Google privileging it the way did which is that they provide a browser any foliage 5 browser experience and a very lightweight communication layer between the 2 so on initial them how this works with the data the player and it's not alive demo his from
past socks on public networks but what you're seeing here is on this computer here we've got AJW player but we start hit the caste icon and starts a from caste session on your T I was happening there is there's relational 5 Apr that agenda the player in full-screen mode with a little bit of custom scanning on top of it and and there's a communication between uh the the sender at which is the player the player sort of becomes a a a sender and the receiver which runs
on the TV and so basically what was happening
is that the Chromecast application is signaling
to the desktop application the state of the player the the player does renders a you why for example here's an ad they the player knows that and that is playing Sochaux the companion add the user can actually click on this which advertisers love and the the Comcast application renders all video playback essentially takes over the playback session and so for example this advertising use case all the all the beginning it's going on the ad server is coming from the TV you can really disclose out you're on your web browser and your media player will
continue to play as as as configured so that there and so do the
players then open source video players since since its inception back in 2005 we recently migrated from a pretty prettier cobweb infested subversion repository virtue shining you get have repository we seem to getting uptake uptake in open source contributions are probably just due to the use of which give allows you to come to the full requests and review them and have a conversation there on 1 place it's really really really nice and in relation to the player itself uh JB player the company which does much more than just a video player contributes to multiple research projects and extremely can and we've been if you about a few projects of our own parental purposes and so 1 of the nice things about or to raw approach is that some sort of since the beginning we've had a very active developer community also active support community so our other forms of art are still very active we recently implemented a sort of the democratic roadmap on just to see what the community of 1 in terms of the new features and functionality dash was was the very top of the list followed by CSS scanning and and conditional 5 which essentially dashed so we know we're going to have to make several months and it but I can't wait to see it and it turns out the so so that thank you for few kind of in the brain and so we've got we've got about 15 minutes let alone so that you know with the the provision of these things this they what's
what what what what that what what the best linear and here he has if the if the if this a it's it's actually kind of a difficult problem because of the way in in a so many different uh use cases and features that you would have potentially test against you know and and a lot of things come into play when actually measuring you know the 1st time the ad starts to display of or the players social way content couldn't ad network fulfillment and there's a lot of different factors that can come into sort of trying to make our objective in attempting to make an objective analysis but and also it's difficult for any given vendor to do conduct that objective analysis to begin with so I think it bigger project for somebody to to take on a fair interested in doing what about you and in the this this will likely have the so we we actually that is so the the question was I have an end user conferences these all these products and so JD flare had our 1st conference last May as called Gideon insights renewed union this year so feel free come near city in they sense that we have a cultural connects a coming there they're control connected make it all the way we did we did Hackathorn next less connected to very cooler project so you're welcome to following to the maximum the i it we haven't done when it and yes we don't know we have a bum I'm sure this is something that that all of us have had struggled with with Facebook we've been in discussions with them and they're very slow to move on each channel 5 players in the news and so we actually frigidity player we have a legacy of player that that that works in in Facebook but it's not our core player did also assumes user flesh player on Facebook or Twitter lately opened the 1805 and smoke in the way so logistic and yeah this area the tree for you and your work the bug tracker but will so we currently have I as a reason for that reason did did get up for the Pope requests and and then we have our our forms which are the traditional please said it's bloodless let's connect afterwards an animal yet with and so what would you think that that yes so we supported in adaptive in Nigel us some multiple audio tracks and you you user interface to select between the 2 of them it was it was also a major letters on their their smoke streaming both some browser and under the native applications is a United other the users doesn't have that yeah working on that in with the integration with that shifts and only this and this and this and that this the question and yeah it's it's been a topic of internal discussion for quite some time we we may we may transition to more and a popular license over time the we definitely heard that it is it it's Creative Commons Attribution Non Commercial Share Alike so what again what 1 and I I guess counter as a GPL license which is also like less than say an Apache license in terms of the freedom that allows but that you know are still allows a commercial distribution case other questions the that's and also the the so that the question was dashes it's sort of consolidating in terms of the standards will we see native implementations in browsers for dash and my guess is absolutely not and so this has been sort of discussion with the browser vendors and whether they should implement streaming standards such as H loss such as dash and the media source extensions API is a reflection of their approach to streaming formats the sort of agnostic I guess that is the official approach and yes I don't think so in yeah and there was actually Microsoft announced recently that they are building dashed into the browser just you can use that in the in URL but the other browsers won't as won't be something we can just rely on still a program like attached s but I'm dashes something our or collaborating on right now so that's at least you posit you'll be overturned 1 library the kind I think it's it's worthwhile so emphasize the fact that we have 1 dash chess library the that everybody sort of targeting incidents can help the standard effort a lot because if you have lots of different implementations it's very difficult for you know of a service or for a cancer it's working with 1 streaming library and it won't work with another and especially across browsers is it it's very becomes very complicated to support a and as you've seen with age unless we sort of have a standard by Apple definition you know like what the words on the iPad that it's legitimate age less of a dozen that's something else you know who and and and so of something like that to fervor dashes really critical in this case it's in a few words about yes on In limits dashed but things and although not to say that dashes obviously has a very for both of the standard scientific cation process but and dashed S doesn't include everything about standard also again just a reference a mutation is really valuable in sort of been able to actually deliver media and users working in the the the the the the view of wired you in thank you the of the right that if