About simplevideo

Note: This library is still very much in an alpha state. Older versions of browsers, mobile support, nor many versions of Flash have been tested yet. simplevideo works without issue in the latest versions of Firefox, Chrome, and Safari on Mac OSX 10.9. More testing will happen in the near future.

The aim of simplevideo is to create a very light-weight interface for video on the web. videojs and JW Player are great on their own merits, but some developers need a simpler solution that's much closer to the video element itself. simplevideo aims to be that lower-level solution.

Quick Start

Dependencies

Usage

simplevideo takes a target element to turn into an HTML5 video tag or falls back to a Flash embed if the user's browser does not support the video's mimetype. Note: simplevideo only currently supports mp4 videos, but more support is coming.

You'll need to reference jQuery and simplevideo on your page.

<head>
    <script src="jquery.js"></script>
    <script src="simplevideo.js"></script>
</head>

From there, you'll be able to create video elements on the page normally and simplevideo will replace them when it is invoked.

<div id="mySimpleVideo"></div>
<script>
    simplevideo.init({
        target: '#mySimpleVideo',
        src: 'myVideoFilePath.mp4'
    });
</script>

Similarly, you can use an existing video element and simplevideo will handle the existing attributes to play the video.

<video class="my-video-class" loop autoplay>
    <source src="myVideoFilePath.mp4" type="video/mp4" />
</video>
<script>
    var myVideoAsAJQueryObject = $('.my-video-class');
    simplevideo.init({
        target: myVideoAsAJQueryObject
    });
</script>

When you initialize a simplevideo object, it returns an object that allows you to interact with the video.

<video class="my-video-class" loop autoplay>
    <source src="myVideoFilePath.mp4" type="video/mp4" />
</video>
<script>
    var myVideo = simplevideo.init({
        target: '.my-video-class'
    });

    myVideo.pause();
    myVideo.setVolume('30%');
</script>

There are also hooks to listen to events that happen to the video.

<video class="my-video-class" loop autoplay>
    <source src="myVideoFilePath.mp4" type="video/mp4" />
</video>
<script>
    var myVideo = simplevideo.init({
            target: '.my-video-class',
            onPause: function() {
                alert('playing!');
            },
            onPlay: function() {
                alert('paused...');
            },
            onPlaying: function(currentTime, videoDuration) {
                console.log('current time: ' + currentTime + ', video duration: ' + videoDuration);
            },
            onEnded: function() {
                alert('video complete');
            }
        });
</script>

In total, the properties of a simplevideo instance is:

In addition, there are a few methods and properties returned in the simplevideo object:

Creator

Brian Manning

License

Code and documentation copyright 2014 Brian Manning. Code released under the MIT license.