Video.

js

ESOF
Class 3MIEIC04
Group 4:

201603404 Carlos Daniel Coelho Ferreira Gomes

201605360 Diogo Rafael Amorim Mendes
201802016 Matheus Brambilla Kozuki

1
 20/12/2018

ÍNDICE

Video.js Introduction – Page 3

System Architecture – Page 3
Issue #5581 – Autoplay – Page 5
Identifying the Issue – Page 5
Requirements – Page 6
Source Code Files – Page 7
Design of the Fix – Page 8
Source Code Fix – Page 10
Fix Validation – Page 10
Submission of the Fix – Page 11
Issue #5604 – Full Screen - Page 12
Identifying the Issue – Page 12
Requirements – Page 12
Source Code Files – Page 13
Design of the Fix – Page 15
Source Code Fix – Page 18
Fix Validation – Page 19
Submission of the Fix – Page 19
Wrap-up – Page 20

2
 Video.js Introduction

Video.js is an open source library for working with video on the web, also
known as an HTML video player. It supports HTML5, Flash, YouTube and
Vimeo.
It’s an active project, with almost daily new commits and it has over 300
contributors.
Approximately 400.000 websites use video.js, which means it is utilized
on a worldwide basis.

System Architecture

In order to understand the system in which we are going to work on, we

designed this simple but well-founded diagram, where we can observe all the
different relations between every folder that belongs to the project.

3
 Figure 1 - Video.js system architecture diagram

To demonstrate how video.js really works, in its essence, we decided to

create a component diagram to illustrate the main function of this system, which
is to play a video. Below, we can see how the text, audio and video components
of the open source project interact, to achieve the goal of triggering an event that
will ultimately result in the desired video requested by the user.

Figure 2 - Component diagram that triggers an event

4
 Issue #5581 – Autoplay

Identifying the Issue

This issue was brought up because the autoplay functionality does not
work in Chrome when toggled on.
As the name indicates, the autoplay attribute consists on automatically
playing a video as soon as the page is loaded, without having to click on the play-
button.
Autoplay can be called on the data-setup or in the video tag itself,
separately or simultaneously and it won’t activate either way. The code snippet
below, demonstrates how to recreate the issue using video.js.

Figure 3 - HTML code that triggers the issue

5
 Requirements

The issue was opened about a month ago, by user “afridley”, who when
trying to toggle autoplay on, realized that the video wouldn’t do what was
supposed to do. Here is a snippet of how he describes his user experience:

Figure 4 - User story

This issue occurs in Chrome 70, where it only shows a frame of the video
(see image below) without automatically reproducing it.

Figure 5 - Representation of the state of the video when autoplay is toggled on

6
 To better comprehend the issue at bay we created a use case diagram that
demonstrates how the issue is approached from the point of view of the user:

Figure 6 - Autoplay issue use case diagram

Source Code Files

The first step in order to accomplish the fix of the issue is to assess and
determine what are the files directly and indirectly related to the issue.

List of files directly involved with the issue:

player.js – File that contains the specification of the autoplay option and is
directly related to the reproduction of the video.
video.js – File that creates the video options chosen by the user, in this case it
also creates the autoplay option.
setup.js – Sets up any tags that may have been toggled on. It also checks if the
video has been loaded and is ready to be played.
merge-options.js – If two or more option are activated, the code present in this
file is responsible for merging it, in order to enhance the user experience.
browser.js – Checks the browser where the video will be played on, and it is also
capable from distinguishing between android and iOS devices.
promise.js – File related to promise like objects, it has the ability of checking
them and silence them, for example.

7
 List of files indirectly involved with the issue:
component.js – File that contains the main class for most objects present in
video.js.
button.js – It represents most of the buttons used on the control-bar of the video.
big-play-button.js – File that specifically involves everything about the play
button that appears in the middle of the video-screen.
control-bar.js – Code that possesses the controller of the main controls available
in video.js.

Design of the Fix

In order to automatically start playing the video the autoplay option needs
to be properly defined. The following is a code snippet related to autoplay:

Figure 7 - Code that most accurately represents autoplay

8
 A class diagram is the best way to exemplify all the connections between
the six files that are directly involved with the autoplay issue. We made sure to
add the main functions related to the issue, of each file, to the diagram for it to be
easily understandable.

Figure 8 - Class diagram for autoplay issue

9
 When trying to create a fix, Google released a new Google Chrome
version. For our amazement, we concluded that the problem may not have been
with the coding of video.js but with some functionality related to Chrome that
was stopping the autoplay option from doing its job.
We designed a sequence diagram to show how the issue was solved
without having to manipulate any source code:

Figure 9 - Sequence diagram for the autoplay issue

Source code Fix

Unfortunately, no source code fix was made by us, since in all honesty, we
didn’t think something was wrong with the code. If that weren’t the case it
autoplay would still now work in the new version of Chrome, or at least not work
on another browser.

Fix Validation

We tested if autoplay was only deactivated in Chrome 70, and that came
to be true. Microsoft Edge, Safari, Mozilla Firefox and IE were all able to
autoplay the test video, as was Google Chrome after its update to Chrome 71.

10
 Submission of the Fix

Sadly, no fix was submitted for the reasons explained above. We would
like to add that we did our best to be able to create a fix but, could not do it as
other programmers haven’t been able to do it for the last month.

11
 Issue #5604 – Full Screen

Identifying the Issue

In this second issue, it is stated that when the user sets the full screen
option off, the full screen option disappears like it was intended, but when the
user double clicks on the video it still goes right onto full screen. The following
image is the script introduced in a HTML test file that disables the full screen
button:

Figure 10 - Script that toggles the full screen option off

Requirements

The issue was also opened about a month ago, this time by user
“bantikyan”, who created a script that set the fullscreenToggle option to false, or
in other words that stopped the viewer from watching the intended video in full
screen. In his words, the video “on double click goes to full screen”, hence
reducing the user experience and the opening of this important issue.

12
 The most important thing that video.js and most programs focus on, is the
ability of any person to be able to utilize the programs’ full capabilities. When
that doesn’t happen, it is never good.
Put that, we created a use case diagram that represents with simplicity but
objectivity what happens to the user when this issue occurs:

Figure 11 - Full screen issue use case diagram

Source Code Files

Following the approach to the first issue, the first step in order to
accomplish the fix of the issue is to assess and determine what are the files
directly and indirectly related to the issue.

List of files directly involved with the issue:

player.js – File that contains the specification of the autoplay option and is
directly related to the reproduction of the video.
events.js – File that lists every event type and can call a method to handle each
type.

13
 fullscreen-api.js – Stores every browser-specific methods for the full screen API.
fullscreen-toggle.js – Code that is capable of toggling full screen mode on and
off whenever it is necessary.
component.js – File that contains the main class for most objects present in
video.js.
control-bar.js - Code that possesses the controller of the main controls available
in video.js.
List of files indirectly involved with the issue:
video.js – File that creates the video options chosen by the user.
setup.js - Sets up any tags that may have been toggled on. It also checks if the
video has been loaded and is ready to be played.
clickable-component.js – File that handles any component that must be clicked
or keyboard actionable.
menu-button.js – Contains code that handles every menu button, like the full
screen button, for example.

14
 Design of the Fix

After a lot of research, we finally found the function responsible for

handling the double-click event that activated full screen mode (see image
below). It is present in player.js, so now we knew where to start focusing our
energies.

Figure 12 - Major function when it comes to solving the issue

15
 We also made a class diagram for this issue, using the six most important
files that would help us solve the issue at hand. It represents the different
connections between them and it also contains functions of each file that are
related to the full screen activation and the double-click event:

16
 We know had a pretty clear idea of the path we had to take to get to our
destination: the issue fix. And what better way to represent that path, than a
sequence diagram designed by us?

Figure 13 - Full screen issue sequence diagram

17
 Source Code Fix

Ultimately, we were able to code a fix that consisted only on adding an if

clause on the function displayed above on figure 12.

Figure 14 - Code of the fix

The idea was that if the control bar possessed the fullscreenToggle button,
double-clicking on the video would allow for full screen to be activated and
deactivated. If that button is not present, which happens when fullscreenToggle is
turned off, going to full screen even after double-clicking on the video becomes
impossible, just as we intended.
So, we managed to find a fullscreenToggle property el_ that contains the
value “true” whenever it is enabled and “false” whenever it isn’t.
Finally, we only had to call the if clause with this property before the
requestFullscreen function that triggers full screen mode.
With these resources at hand it was with great sense of accomplishment
that we coded a fix.

18
 Fix Validation

Firstly, we created a sandbox to be able to change our code easily and see
how the test video would react to the changes that we were constantly making.
When we came up with the code displayed in the last figure, we were happy to
see that the video reacted the way that we wanted it to react: full screen no longer
activated, no matter how many times one was able to double-click repeatedly!
Our code also went through the Travis CI build to check if every single
new line was according to the rest of the player.js file.
Finally, a last check was performed to see if there were no code errors and
it resulted in a positive result.

Submission of the Fix

The submission of the fix is represented in the following pull-request:

Figure 15 - Full screen issue pull-request

19
 After completing 2 different checks…

Figure 16 - Checks passed by the full screen fix

We received a response from one of the main project maintainers:

Figure 17 - Pull-request response

From what we understood, our fix was not accepted not because it didn’t
fix the issue that we were working on, but because it wasn’t a general fix since a
custom full screen button could possibly exist.
Apparently, another PR with an option that can be inserted by the user to
disable double-click to full screen is ready to be merged in the upcoming update
of video.js.
From these facts, we can affirm that we solved the issue that we were
directly working on and are proud of our work. However, other more general
issues related to the same aspects of our issue already had different fixes
preferred by the project’s admins.

Wrap-up

The group came to an agreement that every one of us equally contributed

to this project and therefore the percentages for the three of us are 33.(3) % each.

20