Video Library Player

Click to Watch

AuditMatic Tour

Click to Watch

Old West, New Excitement

  • Start
  • Chapter 1
  • Chapter 2
  • Chapter 3
  • Chapter 4
  • Chapter 5
  • Chapter 6
  • Chapter 7
  • Chapter 8
  • Chapter 9
  • Chapter 10
Click to Watch

Alavour Promo

Click to Watch

AuditMatic Tour

Click to Watch

Old West, New Excitement

  • Start
  • Chapter 1
  • Chapter 2
  • Chapter 3
  • Chapter 4
  • Chapter 5
  • Chapter 6
  • Chapter 7
  • Chapter 8
  • Chapter 9
  • Chapter 10
Click to Watch

Alavour Promo

No sample videos are available at this time.

About Video Library Player

VLP-icon-80x80Video Library Player (VLP) is a Javascript-driven application that allows you to place a library of Flash Video files (.flv) of any dimension onto a single webpage using simple and standards-compliant HTML for its configuration. Each video can have its own set of chapters or none at all. The video files can be streamed using protocols like RTMP (rtmp://) and HTTP (http://).

Video Library Player has been built as a "plug-in" for a website or webpage. This allows for fast implementation by non developers—and even faster implementation for developers.

Along with its own Javascript core, Video Library Player ultizes the open-source jQuery Javascript library, a few jQuery addons, <swfobject>, and the Flash-based JW FLV Player (license required) as a framework for its functionality. Additionally, a custom JW FLV Player skin is included.

The Who What Why

Video Library Player was created by Lance Schlegel of Mind Aim, a Dallas-based digital marketing, website, and interactive development agency, as a versitile and fast-to-deploy solution for displaying multiple videos with chapters on websites. Mind Aim specializes in interactive, web-based video communication solutions.

Browser Requirements

Video Library Player works with all modern web browsers (Firefox, Internet Explorer 7/8, Opera, Safari, Chrome, etc.) VLP requires the Flash Player plug-in be installed and Javascript enabled in the browser. Although VLP functions and displays correctly in IE6, support for it is not a primary consideration and is not garanteed. (Jeez, people, upgrade your browser already.)

Download & Licensing Video Library Player

Download Video Library Player package by entering your email address and clicking the Download button. Your email address is required [Privacy Policy].

A file named "vidLibPlayerLib.zip" will be downloaded to your computer and will expand to a folder named "vidLibPlayerLib." This folder contains all the components necessary to start using Video Library Player.

Licensing

General

CC-ANCSAVLP is available through the Creative Commons Attribution-Noncommercial-Share Alike license.

Commercial

For commercial use, Video Library Player requires a license. Purchase your license by selecting the licensing option that fits your usage intent.

Video Library Player commercial license is based on the domain name on which it will be deployed. Each domain name that VLP will be used on requires its own license.

What commercial use means

A license for VLP is necessary if any of the following is true:

  • A website owned and/or operated by a company or corporation
  • A website designed for promotional purposes of any product or service
  • A websites with any advertisements and/or promotions

Install & Setup Instructions

It really is easy to configure Video Library Player. Although these instructions look a little daunting, they are more for the sake of thoroughness and reference. The source of this page contains comments that for most developers will be all they'll need to implement VLP.

Adding Video Library Player to your page

First, copy the downloaded folder name "vidLibPlayerLib" to the root level of you website.

Second, in the HEAD of the page on which you want Video Library Player (VLP) to appear, include the CSS file "vidLibPlayer-default.css" and the IE-specific (and conditional) CSS files "vidLibPlayer-ie6.css" and "vidLibPlayer-ie7.css." Also, include the JS file "vidLibPlayerBase.js" (see code snippet below.) It's recommended to place the calls for these files AFTER the CSS and JS files already on the page.

<style type="text/css" media="screen">@import "/vidLibPlayerLib/css/vidLibPlayer-default.css";</style>
<!--[if lt IE 7]><style type="text/css">@import "/vidLibPlayerLib/css/vidLibPlayer-ie6.css";</style><![endif]-->
<!--[if gte IE 6]><style type="text/css">@import "/vidLibPlayerLib/css/vidLibPlayer-ie7.css";</style><![endif]-->
<script type="text/javascript" src="/vidLibPlayerLib/scripts/vidLibPlayerBase.js"></script>

Third, include a DIV element with the ID of "VLP__playlistArea" in the BODY of the page on which you want VLP to display. For each video that you want to appear in the playlist menu, a corresponding playlist item is required.

<div id="VLP__playlistArea">
 (Playlist Items go here)
</div>

Adding playlist items (videos)

To add items (videos) to the playlist, place a DIV with the "class" of "VLP__playlistItem" with all of its contents (see code snippet below) for each item in your playlist. Duplicate the DIV for each item in the playlist and modify each instance with the specics for that video. So, for example, if you want three videos in your playlist, then you will have three DIVs with the "VLP__playlistItem" class. Each instance should have a different thumbnail image "src" value, its own "longdesc" attribute value, and its own list of chapters (if aplicable) with time codes and tiles.

<div class="VLP__playlistItem">
	<img class="VLP__thumbnail" src="path/to/thumbnail_image.jpg" longdesc="320|240|path/to/posterframe_image.jpg|rtmp,http server address|path/to/video_file.flv"  alt="Click to Watch" />
	<h3 class="lines1">Title of Video</h3>
	<ul class="VLP__chapMarkList">
		<li class="VLP__chapMark" title="0:00"><span>Start</span></li>
		<li class="VLP__chapMark" title="1:00"><span>Chapter 1</span></li>
		<li class="VLP__chapMark" title="2:00"><span>Chapter 2</span></li>
	</ul>
</div>

Playlist item thumbnail

The IMG element with the "class" of "VLP__thumbnail" is the image that you want to use as the thumbnail graphic. The thumbnail has a default width of 60 pixels and height of 40 pixels. Any graphic used as the thumbnail will be resized to display at these dimensions.

src="path/to/thumbnail_image.jpg"

"longdesc" attribute value

The IMG element in each playlist DIV (VLP__playlistItem) has a special "longdesc" attribute value. Its value holds five key configuration values. Each value is separated by the "|" character. Do not leave out the "|" characters. The longdesc attribute stores the width and height of each video, the file name and path to the video's poster frame, the server URL, and the file name of the video and path to the video file.

longdesc="A|B|C|D|E"

Video Width & HeightA Video & Posterframe Width

This is the pixel width of the video and its corresponding posterframe.

B Video & Posterframe Height

This is the pixel height of the video and its corresponding posterframe.

C Posterframe Image Name & Path

Local path and file name to the image to use as the poster frame. Most commonly this is a JPG or PNG. This file must be located within the same domain.

path/to/posterframe_image.jpg

D Server URL (RTMP/HTTP)

The full URL of the server hosting the video files—including protocol (rtmp:// or http://) and trailing slash.

rtmp://limelight.fcod.llnwd.net/b1234/a25/
http://www.domain.com/

This value may be ommitted if video files are at the same domain or on the same local system.

Using a streaming server (RTMP) allows the user to jump to any chapter marker without the need for the player to cache the video source. When using standard HTTP, jumping to chapters requires that the video source be cached by the player to allow the chapter markers to function properly. When a HTTP-delivered video is selected from the playlist, VLP will begin downloading it into the player's cache automatically.

E Video File Name & Path

The path relative to the root level of the Server URL and file name of the video. You may ommit ".flv" extension for the file name value. VLP will add it for you.

Either will work with VLP:

path/to/video_file
path/to/video_file.flv

If there was no Server URL value defined, the path to the video file is relative from the "player.swf" file.

Title of playlist item (H3)

The H3 element in a playlist item is used as the title of the video. The title is displayed on the playlist item's button across the top of VLP. Additionally, the title of the currently-selected video is displayed next to "Now Playing" in the title bar.

Due to issues with Internet Explorer 6 and 7, the title will not vertically center without additional styling via conditional CSS files. If the title breaks to two lines, add the "class" of "lines2" to the H3 element. If it breaks to three lines, then add "lines3."

One-line Title:

<h3>Title of Video</h3>

Two-line Title:

<h3 class="lines2">A longer Title of Video</h3>

Three-line Title:

<h3 class="lines3">A Much Longer & Wordy Title of Video</h3>

Adding chapters to a playlist item

To add chapters to a playlist item, add list items (LI) to the UL element with the "class" name of "VLP__chapMarkList." Each LI must have a "class" name of "VLP__chapMark." The content of the LI will be displayed as the label for the chapter.

Each LI element in the UL must have a "title" attribute with the value of the timecode that corresponds with the beginning of the chapter.

<ul class="VLP__chapMarkList">
	<li class="VLP__chapMark" title="0:00"><span>Start</span></li>
	<li class="VLP__chapMark" title="1:00"><span>Chapter 1</span></li>
	<li class="VLP__chapMark" title="2:00"><span>Chapter 2</span></li>
</ul>

Options & Customization

Linking to a specific playlist item

The standard behavior of VLP is to display the first item in playlist at load time. However, if you would like to display another video at load time or provide a inbound link to any video in a playlist, VLP provides a simple method to achieve this behavior. VLP uses the title of the video from the H3 element in the playlist item as the unique way to load a video other than the first. By adding a query for "title" to the URL string paired with the H3 value, VLP will load the desired video.

So, if the H3 element's content is Title of Video, then append the following to the URL after the file name of the page upon which VLP is incorporated.

?title=Title of Video

A full URL would look like: http://www.domain.com/thispage.html?title=Title of Video

Make VLP draggable

VLP can be set to allow itself to be draggable on the page. To switch on dragging, add a "class" of "draggable" to the DIV with the ID of "VLP__playlistItem."

<div class="VLP__playlistItem" class="draggable">

Customizing playlist view state (collapsed / hidden)

Play ListIf you would like the playlist area that appears across the top of VLP to be collapsed or hidden completely when the page is loaded, you may do so by adding either "collapsed" or "hidden" as the value of its "class" attribute on the DIV with the ID of "VLP__playlistArea" (see comments in source.) The hidden state is different from the collapsed state in that the expand/collapse button will not display when set to "hidden."

If Video Library Player will have only one video in its playlist (one DIV with "class" "VLP__playlistItem"), then by default the playlist menu area across the top of VLP will not display.

Customizing chapter view state (collapsed / hidden)

Chapter ListIf you would like the chapter menu area that appears along the left side of VLP to be collapsed or hidden completely for a specific playlist item, you may do so by appending either "collapsed" or "hidden" to the "class" attribute for the UL element that contains the chapter list. The UL element that contains the chapter list must have a "class" of "VLP__chapMarkList" (see comments in source.) The hidden state is different from the collapsed state in that the expand/collapse button will not display when set to "hidden."

If a video does not have any associate chapters (no LI elements with "class" of "VLP__chapMark"), then the chapter menu will not display for that video. It will be hidden automatically.

Interface Design Customization

Since all interface design is CSS based, you can acheive a high degree of customization by modifying the CSS for VLP. However, rather than modifying the core CSS file, "vidLibPlayer.css," it is recommended that modifications be made within "vidLibPlayer-default.css."

Help & Support

VLP-icon-80x80We can setup and customize Video Library Player (VLP) for your site. Also, we offer support in helping you get VLP setup on your site.

For support, email us with your question to: .

Copyright 2014 Mind Aim LLC, Lance Schlegel   All rights reserved.   Mind Aim.   XHTML 1.0 Strict Compliant
All sample videos are property of their respective owners.