Azrieli Students On Software Modeling and Architecture
  1. BeEF
  2. firefox-ios
  3. Video.js
  4. OptiKey

Video.js logo ##Video.js - HTML5 Video Player WebSite ##Video.js - Github Repo

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

Azriely Engeniring collage Jerusalem

Table of Contents *generated with [DocToc]

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.

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 :

Stakeholder Analysis

This is a software library and that the reason that the all stackholders are developers. As a general rule in software libray there are 2 main types of developers, These users that develop this library (fixes bugs, add features) and also the developers that uses the library for their own bussines.
Corporate Shepherd Brightcove is the main sponsor of the project, employing many of the core members and investing thousands of engineering hours every year in video.js and video.js plugins.

The Brightcove Player is built on video.js and used on thousands of video websites, ensuring video.js can handle the most professional use cases. CDN Sponsor

Users

Zencoder - Also is the most active developer of Video.js Zencoder is a cloud-based video and audio encoding product suite from Brightcove, a leading global provider of cloud content services. The Zencoder service provides customers reliable encoding of live and on-demand video. Funny Or Die Funny Or Die is a comedy video website founded in 2007 that combines user-generated content withoriginal, exclusive content. FunnyOrDie Funny Or Die – Zenconder case study The Guardian The Guardian is a British national daily newspaper. Their media feeds are played using the Video.JS library (with Flash compatibility) Onion Studios Onion Studios is a dynamic digital video network.

How to use Video.JS

Compatible Software

Compatible OS’s:

Compatible browsers:

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

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:

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:

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:

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

##Module Organization

Class Diagrams

Entire Project Diagram – Made with WAVI Class Diagram

Inheritage classes

On the next two diagrams can see that there are twon main classes, the first is Component class and all the feature classes directly or indirectly implement it. The second is the Event Trigger as the previous class all the event handlers implements this class. Component Class – Made with PlantUML

Component and inherited Classes Diagram EventTrigger Class – Made with PlantUML

EventTrigger and inherited Class Diagram

Extensibility

The project was design for a easy extesibility, each developer can add a feature as skins or ability without change all the project. Type of extensions:

Code Metrics

Submitting the Video.js library to CodeClimate online Analyzing engine produced a fine badge of 1.99GPA, which is their own scale of quality.

Most of the issues found are in the large peaces of code (like player.js & component.js) and are focused around code complexity and duplication. Video.js Few issues Code Climate Issue Count

Conclusions and Recommendations

Security Issues

Reflections and summary

While working on this project we learned a few points regarding project modeling.

We learned that analyzing a project architecture and model, is possible without a knowledge about the subject of the project. This shows us that modeling is universal regardless of type of project, or language used.

We learned that when examining a project, it is good to check and understand about the creator (a single person, a company etc.) and what was the need. Examination of the code, commit history, we can learn when and how the code and the project evolved. And this is before even reading one line of code. For analyzing the code architecture and modeling we used Tools that created graphs and UML diagrams. This was a better way to start, and it was not relevant to start reading the code and trying to understand from it, a code that is in a language unknown for us, and a project structure unfamiliar. Although a deeper understanding of the code could have given us a better in site for the modeling perspective.

We contacted the developer, and he was happy with our work. He said the most useful section will be The Module Organization section that we insert a few diagrams. He reconsider the pull request and close it without merging. (https://github.com/videojs/video.js/pull/3383))

Beside this project, we learned the value of GIT and GIT HUB as a tool of collaboration and joined development. We also have a question about open source project – who are the Stakeholders the creator? The users?

Bibliography & References

Tools