HTML 5 Video Popup Player Documentation

This simple and convenient popup video player script will display MP4,WEBM and OGV type videos from any valid URL. Generally, the MP4 file type will be the most common.

The video player used in this script assumes a fully compliant HTML5 web browser. Currrent versions of Chrome, Safari (Apple), Firefox meet these standards. Safari, IE and Edge work with MP4 type files but may require third party plug-ins to allow WEBM and OVG files to display. Flash has been largely deprecated in these browsers and is no longer a viable player option.

What makes this popup video technology appealing is twofold;

1. The video player display appears as "popup" window, fired from HTML links, which saves having to have one or more video player windows occupy page "real estate".
2. There is no need to create separate embed code for each video. Applications which aim to show multiple videos can be isolated on a single web page without requirement for any embed code.

Script Setup

This HTML5 video combo option requires only one minified (approx 19K) service script, which handles both the player set-up, links and related styles. Add a this script file URL to the HEAD section of your HTML page as...

<script type="text/javascript" src="Hosting website/video_html5_mins.js"></script>

Video Play Links

Once the above script is added to an HTML document HTML5 video clips (mp4,webm,ogv) can be displayed in a popup window from any valid Internet source (URL) link as shown if the fomat below. A sample link for HTML5 video is...

<a href="javascript:PlayHTML5(videoURL, width, bkgColor)">Link Text</a>

The example above is shown as fired from a standard HTML anchor tag <a> but for advanced users or developers the links can be fired from any OnClick(function) method in any valid HTML container source (DIV, P, BUTTON, INPUT etc.) as shown in button below. A "function()" argument can be any JS function that contains the PlayHTML5(args) option. See the source code for this page for examples below. Multiple video links on a page are permitted. No embedded players are required.

In using this script it is assumed that the developer or user has proper permissions to access the selected video file URLs.

Link Script Argument Details

Note: Optional values indicated below can be omitted from the function call.

• The required videoURL value is any valid URL (full or relative) which points to an mp4,webm or ovg video file.(Required)
  
  Note : The correct videoURL formats for local files are;
  
  1. Windows - file:///c:/local_path
  2. Mac OS - file:///local_path
  3. Other (Unix) - file:///home/local_path
• The optional width value is any integer value for width between minimum of 600 and maximum of 900.  (Optional - Defaults to 600px wide if omitted) The video height is automatically calculated for a 16 x 9 aspect ratio.
• The optional bkgColor value can be either a Hex coded color value string (e.g. '#FF00FF') or an allowed HTML descriptive color name (e.g. 'Red', 'Green' etc.). This color will be applied to the video control bar area background (see examples below). Darker colors are recommended. (Optional - Defaults to a white-gray gradient if not specified.)

HTML5 Examples

MP4 Example (600 wide) Default Background (Gradient)

MP4 Example (750 wide) 'Navy' descriptive background color

MP4 Example (800 wide) 'Peru' Hex color code

MP4 Example (900 wide) 'Teal' descriptive background color

WEBM Example (900 wide) Default Background (Gradient)

OGV Example (No width-default 600 wide) Default Background Gradient)

(Showing a full URL pointing to demo video an another Intenet site)

For more information on acquiring this HTML 5 Video Popup Player script please click here to contact us.

View source for this page for script and link examples.