Harel, Nati, Meir, and Pablo
Our Video.Js documentation repository
Azriely Engeniring collage Jerusalem
Abstract
Is an open source video player. Active for 5 years.
The project is interesting because it is open source library that allows to stream video to almost any device regardless of device or browser capabilities. This library solves a long-standing problem of Streaming of video and is unique in the market today.
Table of Contents
missing table
--- Need to write what this link is and place it , in the right location ---> VIDEO.JS - HTML5 Video Player
Video.js is a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over 200,000 websites
Video.JS is compatible with many Browsers and Devices, thus makes it available on many platforms (including ones without java script). This is achieved through the use of embedded code. The java script library fixes browser & device bugs, and makes sure your video is even more compatible across different browser versions. The pure HTML5/CSS skin ensures a consistent look between HTML5 browsers, and easy custom skinning if you want to give it a specific look, or brand it with your own colors.
The Advantages :
- Free & Open Source
- Lightweight. NO IMAGES USED
- 100% skinnable using CSS
- Library independent
- Easy to use
- Easy to understand & extend
- Consistent look between browsers
- Full Screen & Full Window Modes
- Volume Control
- Forced fallback to Flash (even when there is an unsupported source)
##Stakeholder Analysis
###Users
missing some more information on stackholders
Zencoder - Also is the creator of Video.js
Compatible Software
Compatible OS's:
- Windows
- Android
- IOS
- Symbian S60
- BlackBerry OS 7.1
Compatible browsers:
- Internet Explorer (Version IE6-IE8 using Flash)
- Firefox 3.6+ (HTML-5)
- Chrome 3+ (HTML-5)
- Opera 10.5+ (HTML-5)
- Safari 4 (HTML-5)
API
Source code example
Simple Embedded -- Official Example
HTML 5
<h1>Responsive Video.js Example (v4.3)</h1>
<p></p>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto"
data-setup='{ "asdf": true }' poster="http://video-js.zencoder.com/oceans-clip.png" >
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
<source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>
JavaScript
videojs.autoSetup();
videojs('my_video_1').ready(function(){
console.log(this.options()); //log all of the default videojs options
// Store the video object
var myPlayer = this, id = myPlayer.id();
// Make up an aspect ratio
var aspectRatio = 264/640;
function resizeVideoJS(){
var width = document.getElementById(id).parentElement.offsetWidth;
myPlayer.width(width).height( width * aspectRatio );
}
// Initialize resizeVideoJS()
resizeVideoJS();
// Then on resize call resizeVideoJS()
window.onresize = resizeVideoJS;
});
##Community
-
GitHub Repository
-
StackOverFlow Forum This forum is used for questions. All watchers will get emails for closed question responses.
-
Video.Js Blog This blog (managed by Steve Heffernan) publishes the latest news about the projects, like anounces for a new version.
##Developer's Perspective ###Developer Types TC Commitee
The Video.js project is jointly governed by a Technical Steering Committee (TSC) which is responsible for high-level guidance of the project. The TSC has final authority over this project including:
- Technical direction
- Project governance and process (including this policy)
- Contribution policy
- GitHub repository hosting
- Conduct guidelines
- Maintaining the list of additional collaborators
Collaborators
Modifications of the contents of the videojs/video.js repository are made on a collaborative basis. Anybody with a GitHub account may propose a modification via pull request and it will be considered by the project Collaborators. All pull requests must be reviewed and accepted by a Collaborator with sufficient expertise who is able to take full responsibility for the change
New features and tests
There are not a tester groups, each developer with each commit must test the entire project and update the TC Commitee with the results. If developer adds additional documentation it would be welcome.
Before commiting new updates the developer is instructed to this guideline: The checklist:
-
Tests written
-
Feature implemented
-
Docs/guides updated
-
Example created (e.g. jsbin)
-
Pull request submitted
###Project Development Process There is no too much information about the process but from the github record we can learn that the project start with only one developer and now the project is been developed by a lot of active developers. The bigger part of this project is the UI part.
###Maintaining Releasing version
The video.js release process is outlined below. Only core contributors to video.js can create a new release but it is done regularly. Contributing guide
Change log file
Each version (stable or beta) has a text file with the changes of the version. This file can includes:
- Bug fixes
- New features
- Architecture changes
- API changes
- Additional notes
###Variablity The project is divide by 3 modules (Core, Plugins, Skins). The core library handles the actual video player capabilities, reading video from many type of sources , and displaying it on HTML5 enviroment. The core module is a rigid module, any change or feature addition to the core requires an authorization of the TC Committee. Plugin and skins , are ment to allow specific customization, for many users. this feature makes Video.JS accessible. Plugin examples - subtitles, recording,playlist playing etc. These module are more easy to change and commit the changes.
###**Core library ** The Javascript core library in video.js is divided in seven principal sections:
- Control-Bar -- All the types of controls (i.e. Audio, Progress, Volume)
- Menu -- All the menu components (i.e Buttons, Items)
- Popup -- The Popup component is used to build pop up controls
- Slider -- The base functionality for sliders like the volume bar and seek bar
- Tech -- Module for media (HTML5 Video, Flash) controllers
- Tracks -- Setup the common parts of an audio, video, or text track
- Utils -- Various utilities
##Module Organization
Entire Project Diagram -- Made with WAVI
Component Class -- Made with PlantUML