Scribd
Upload
59 views7 pages

Video - Js - Issue #5581: Requirements

This issue summary describes problems with autoplay functionality in the Video.js player. It notes that autoplay does not work when used with data-setup or in a video tag. Code examples are provided to reproduce the issue. Key files that handle autoplay functionality and play button triggering are identified. A diagram of the Video.js system architecture is shown along with proposed fixes involving defining the autoplay option and triggering the play button.

Uploaded by

Diogo Mendes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
59 views7 pages

Video - Js - Issue #5581: Requirements

This issue summary describes problems with autoplay functionality in the Video.js player. It notes that autoplay does not work when used with data-setup or in a video tag. Code examples are provided to reproduce the issue. Key files that handle autoplay functionality and play button triggering are identified. A diagram of the Video.js system architecture is shown along with proposed fixes involving defining the autoplay option and triggering the play button.

Uploaded by

Diogo Mendes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Video.

js – Issue #5581
This issue was brought up because autoplay does not work when used with data-setup
or in the video tag itself. In the image below is an example of how to reproduce this
problem:

Figure 1 - Html that triggers the issue

Requirements
It occurs in Chrome 70 and in the 7.0.4 version of video.js where it only shows a frame
of the video without automatically reproducing it like the image below displays:

Figure 2 - Example of the state of the video even with autoplay activated
Source Code Files
The next file is the one that contains the autoplay functionality and for that reason is
vital to the understanding of the issue:

player.js – File that contains the specification of the autoplay option.


On the other hand, the following files may come in handy when it comes to fixing the
issue:

component.js – Main class for a lot of objects.


button.js – Main class for most of the buttons used.
big-play-button.js – File that specifically involves everything about the play button
that appears in the middle of the video-screen.

System Architecture
In order to understand the system in which we are going to work on, we designed this
simple but easily understandable diagram where we can observe the different relations
between every component.

Figure 3 - Videojs system architecture diagram (including files related to the issue)
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 4 - Code snippet from player.js that resumes autoplay


Triggering the play button when autoplay is called may also do the job so, to exemplify
our idea, we chose three main functions from ‘button.js’ that we think will be key in
solving this issue:

Figure 5 - Uml diagram that includes button.js functions


Video.js – Issue #5583
In this issue it is stated that HLS doesn´t show video but audio works fine in a playlist
given by the user. However, if used on a different player it works, so this means this
issue is directly related to video.js.
Code used to reproduce the problem:

Figure 6 - Html that triggers the issue

Requirements
It occurs in the 7.2.4 version of video.js where, as we can see below, the screen is
completely black throughout the video and we can only hear it:

Figure 7 - Frame that is repeated throughout the video


Source Code Files
The two next files are the ones that are related to the playing of the video:

player.js – Main class that englobes most of the objects related to the player itself.
video.js – Function used to call the videojs player.
These last files we think are the way to go in order to fix the issue:

http-streaming/playlist.js – Class that contains playlist related utilities.


http-streaming/playlist-loader.js – Contains functions that are related to the
loading of the playlist.

http-streaming/playlist-selectors.js – Contains functions that are related to the


playlist selection.

System Architecture
In order to understand the system in which we are going to work on, we designed this
simple but easily understandable diagram where we can observe the different relations
between every component.

Figure 8 - Videojs system architecture diagram (including files related to the issue)
Design of the fix
What happens in this issue is that the initial bandwidth is low enough and the video
playlist’s bandwidth is high enough that the initial playlist selector is choosing the
audio-only playlist by default. Once this happens, the source-buffers are made only once
and it only creates an audio source buffer.

Figure 9 - Code snippet that handles the bandwidth


Put that, we think that the way to go in solving this issue is handling the playlist loader
and selector so that this bug doesn’t happen. For that reason, the functions below are in
our opinion the ones that are most involved with the issue at hand:

Figure 10 - Diagram displaying functions from playlist-loader.js and playlist-


selectors.js

Daniel Gomes
Diogo Mendes
Matheus Kozuki

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy