Documentation

Setup

  1. Upload the lazyvideo folder to the public folder on your server.
  2. Link Font Awesome CSS to your site, in the <head> tag.

    <!-- Font Awesome stylesheet -->
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
  3. Link Lazyvideo CSS to your site, in the <head> tag.

    <!-- Lazyvideo Default stylesheet -->
    <link rel="stylesheet" type="text/css" href="lazyvideo/css/lazyvideo.min.css">
  4. Add Lazyvideo Javascript below the jQuery library.

    <!-- jQuery -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    
    <!-- Lazyvideo Javascript -->
    <script src="lazyvideo/js/jquery.lazyvideo.min.js"></script>
  5. Add the class name lazyvideo to any video element in your HTML.

    <video class="lazyvideo"></video>

Example HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Lazyvideo example page</title>
        <!-- Lazyvideo Default stylesheet -->
        <link rel="stylesheet" type="text/css" href="lazyvideo/css/lazyvideo.min.css">
    </head>
    <body>
        <video class="lazyvideo" width="800" height="450" src="videos/example.video.mp4" poster="img/example.poster.jpg"></video>
        
        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <!-- Lazyvideo Javascript -->
        <script src="lazyvideo/js/jquery.lazyvideo.min.js"></script>
    </body>
</html>

Options

Options can be passed via data attributes or Javascript. For data attributes, append the option name to data-, for eaxample data-timer=true

Name Default Description
fade true Boolean value to allow player controls to fade away after a few seconds of inactivity
fullscreen true Boolean value to allow player to enter fullscreen and show the fullscreen toggle
timer false Boolean value to display video timer
forward false Boolean value to display the fast forward button and allow the player to skip forward in the video
rewind false Boolean value to display the rewind button and allow the player to skip backward in the video
volume true Boolean value to display the volume controls
progress true Boolean value to display the video progress bar

Example HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Lazyvideo example page</title>
        <!-- Lazyvideo Default stylesheet -->
        <link rel="stylesheet" type="text/css" href="lazyvideo/css/lazyvideo.min.css">
    </head>
    <body>
        <video class="lazyvideo" width="800" height="450" src="videos/example.video.mp4" poster="img/example.poster.jpg" data-timer="true"></video>
        
        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <!-- Lazyvideo Javascript -->
        <script src="lazyvideo/js/jquery.lazyvideo.min.js"></script>
    </body>
</html>

Via Javascript

You can also add a Lazyvideo controls to a video element with an id my-video

$('#my-video').lazyvideo(options)

Example HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Lazyvideo example page</title>
        <!-- Lazyvideo Default stylesheet -->
        <link rel="stylesheet" type="text/css" href="lazyvideo/css/lazyvideo.min.css">
    </head>
    <body>
        <video class="lazyvideo" width="800" height="450" src="videos/example.video.mp4" poster="img/example.poster.jpg" data-timer="true"></video>
        
        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <!-- Lazyvideo Javascript -->
        <script src="lazyvideo/js/jquery.lazyvideo.min.js"></script>
        <script>
        	$('#my-video').lazyvideo({
        		timer : true
        	});
        </script>
    </body>
</html>

.lazyvideo(options)

Adds Lazyvideo controls to the given element. Accepts an optional options object.
$('#my-video').lazyvideo({
	timer : true
});

Methods

.lazyvideo('fade_controls')

Can be called after Lazyvideo has been initialised on an element.

$('video').lazyvideo('fade_controls');

Example

$('.lazyvideo').lazyvideo('fade_controls');