No sample videos are available at this time.
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.
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.
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.
VLP is available through the Creative Commons Attribution-Noncommercial-Share Alike license.
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.
A license for VLP is necessary if any of the following is true:
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.
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.
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>
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>
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.
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.
This is the pixel width of the video and its corresponding posterframe.
This is the pixel height of the video and its corresponding posterframe.
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.
The full URL of the server hosting the video files—including protocol (rtmp:// or http://) and trailing slash.
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.
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:
If there was no Server URL value defined, the path to the video file is relative from the "player.swf" file.
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."
<h3>Title of Video</h3>
<h3 class="lines2">A longer Title of Video</h3>
<h3 class="lines3">A Much Longer & Wordy Title of Video</h3>
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>
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
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">
If 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.
If 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.
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."