Skip to content

Latest commit

 

History

History
242 lines (175 loc) · 9.32 KB

README.md

File metadata and controls

242 lines (175 loc) · 9.32 KB

Video.js logo

Harel, Nati, Meir, and Pablo
Our Video.Js documentation repository

Azriely Engeniring collage Jerusalem

Join the chat at https://gitter.im/pabloli/ASOSMA

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

Introduction

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

Funny Or Die FunnyOrDie

The Guardian

Onion Studios

Zencoder - Also is the creator of Video.js

How to use 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

Video.JS API Documentation

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

    Repository life activity Repository life activity

    Most active contributors
    Most active contributors

  • 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.

Question answering guide:
Question Guide

##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

    New Feature checklist

    ###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

Class Diagrams

Entire Project Diagram -- Made with WAVI Class Diagram

Component Class -- Made with PlantUML

Component and inherited Classes Diagram EventTrigger Class -- Made with PlantUML

EventTrigger and inherited Class Diagram

Conclusions and Recommendations

Bibliography & References

Tools