Skip to main content
Continuing Online Operations
Loyola is continuing online operations while we prepare for reopening safely in the fall. Coronavirus resources

Streaming Video: OnStream Player

Tips and tricks for better quality in Streaming Video

Sizing the OnStream Video Player

VIDEO IMAGE SIZE

Here at Loyola New Orleans, we store many video files on a service called OnStream, which displays detailed information about a video file this way:

The details along the right side of the OnStream display show that this particular video file has a frame width of 400 pixels and a height of 224 pixels. The aspect ratio of the file (width to height) in this case is 400/224, equivalent to the decimal value 1.786. On OnStream, the aspect ratio of this particular video is shown as "16:9," which is the same value within a small rounding error (16/9 = 1.778). The bit rate is 391, a measure of the data density of the file and directly related to the total size of the file.

MAKING SCALING WORK

Aspect ratio has a great impact on the esthetic experience of a streamed video. While most players automatically scale the video image to fit within the display window allocated to the player, they must also maintain the aspect ratio of the file, because changing the aspect ratio would distort the image, stretching or squashing the image in one direction or the other. If the aspect ratio of the display window differs from the aspect ratio of the file, there will be unused space within the display window, which appears as "black bars," either to the right and left of the video, above and below the video, or on all four sides. Examples described in detail below illustrate this effect.

HTML CODE FOR STREAMING

The HTML code generator we use to create links to video content in the Learning Management System always sets the video display window to a width of 640 pixels and a height of 500 pixels, implying an aspect ratio of 1.28. These numbers are entirely arbitrary, and will work well for some videos, but less well for others. For example, the copy of the Last Metro described above has an aspect ratio of about 1.778, so it won't fit neatly into a window with an aspect ratio of 1.28. In this case, the file's width and height (400 x 224) are both smaller than the display window (640 x 500). The online video player will scale the image up as far as it can, but it will always scale both the height and the width of the file by the same factor, in order to keep the aspect ratio unchanged. The result is that the image includes large black bars that reduce the esthetic appeal of the viewing experience. In this particular instance, the default window size of 640 x 500 will produce results like this:

 

Without changing the video file on OnStream, and without changing the rate or total number of bytes transmitted over the Internet, the viewing experience can be improved by reducing the size of the black bars. This can be done by making sure that the display window size set in the HTML code that invokes the online player is closer to the aspect ratio of the file on OnStream. For example, the window can be set to the values as recorded on OnStream, a width of 400 and height of 224. That won't quite work, at least not with the specific online player used here, because that player displays video controls along the lower edge of the window, and those controls take up just about 20 pixels. To compensate, it is necessary to add those 20 pixels to the height, so the display window has to be 400 x 244 instead of 440 by 224. This produces a small display window with far less unused space (smaller black bars):

It is likely impossible to fully eliminate the black bars with this particular video file, since they appear to be part of the video program itself (they are burned in to the file). One possible cause of this is that during ripping and conversion from DVD the video image was resized in a way that failed to respect the aspect ratio of the original source. 

Of course, the display window does not have to match the settings of the file as recorded on OnStream. If a display window width of 640 (as above) is desired, just divide the desired width of the display window by the width of the file on OnStream, in this case 640 by 400, producing the scaling factor 1.6. Then multiply the height of the file on OnStream by the scaling factor, thus 224 x 1.6 = 358.4. Round that up to the next even number, 360, and add 20 pixels for the controls portion of the display window (as above), producing 380. So the display window should be set to a width of 640 and a height of 380.  This produces:

Theoretically, the display window can be set to a very large size. However, the characteristics of the video file place practical limits on what can be achieved. The relatively low bit rate (and therefore small file size) of this video file means that scaling the image up in size will quickly cause blurring and/or pixelation of the image. A larger file with a higher bit rate can usually be scaled up much further than a smaller file with a smaller bit rate.

ZERO BLACK BARS

If the ripping and conversion process respects the aspect ratio on the DVD or other original source, it should be possible to reduce the black bars completely to zero or very close to it. The Last Metro, used in the examples above, was reripped from the DVD for the purpose of creating an OnStream file with subtitles burned in. Processed through different software and different settings, the OnStream file containing the subtitled version a width of 720 and a height of 432, which is an aspect ratio of 1.667 (rather than the 1.7778 of the version without subtitles). To put that in a window of width 800, divide the desired width (800) by the file width (720) to find the scaling factor of about 1.111. Multiply the height of the file (432) by the scaling factor (1.111) to get 479.952, and round up to the next even number, 480. Add 20 pixels for the control portion of the display window to get a height of 500. Streaming the subtitled version of the film in the 800 x 500 window, then, produces an image with no black bars at all:

ABOUT THE HTML CODE

The Streaming Media Code Generator on the library's forms page always creates the HTML module for streaming a video with the size of the display window set arbitrarily to 640 by 500 pixels. The first line of the HTML code always begins with:

<br /><div style="height: 500px; width: 640px;" class="previewDiv"><embed width="640" height="500" 

To change the size of the window as described above, only the numbers in this first line of code need to be changed. For example, to change the window size to a height of 244 and width of 440, the line would become:

<br /><div style="height: 244x; width: 440px;" class="previewDiv"><embed width="440" height="244" 

However, it appears that the height and width set in the style attribute within the <div> tag have no actual effect, and only the size settings within the <embed> tag matter. Thus the entire style attribute can be eliminated, and the first line of code reduced to:

<br /><div class="previewDiv"><embed width="440" height="244" 

ALGORITHM

Given the height of a video file (HF), width of a video file (WF), and desired width to be displayed (WD), the height for the display (HD) can be calculated by dividing the Width of the Display (WD) by the width of the file (WF) to get the scaling factor, multiplying that scaling factor by the height of the file (HF), rounding the product up to the nearest even number, then adding 20 pixels.  In Excel notation:

HD = EVEN(HF*(WD/WF))+20

Note that the addition of 20 pixels is specific to the particular streaming video player used. If a given player sets aside a different number of pixels for controls such as the start, pause, and stop buttons, that number has to be used instead of 20.