pornzrus – HTML5 Video Player like YouTube in jQuery plugin

Well, as you might know porn industry is sometimes associated to HUGE revolutions on media…

On the search for articles about HTML5 responsive video players I’v found this free video player from pornzrus.com.
This is a 100% copy past from their article.

VideoControls is a open source free plugin made in jQuery for display a YouTube-Like control bar. Based on the new HTML5 tag <video>, VideoControls is cross platform, simple and free to use.

Features
  • Free & Open Source
  • Easy to use
  • Lightweight
  • Based on jQuery
  • 100% skinnable using CSS
  • Consistent look between browsers
  • Preview on timebar mouse over
  • Markers on timebar
  • Buffer loading visibility
  • Medium and Full screen
  • Play/pause, seek
  • Volume Control
  • Mute/unmute
  • Mobile compatible
Change log
 
 2014-06-09 - v1.5
 + features
 - option preview height added and optional
 - option preview wide optional
 ==
 2014-04-10 - v1.4
 + methods
 - fillscreenToggle
 - fullscreenToggle
 - mediumscreenToggle
 - playToggle
 + events
 - durationchange
 - end
 - fillscreenchange
 - fullscreenchange
 - load
 - mediumscreenchange
 - pause
 - play
 - seekchange
 - volumechange
 * bugs
 - video centred
 ==
 2014-03-09 - v1.3
 + features
 - button to fill video on the player
 * bugs / other
 - less attributes
 - original width and height is assigned in video attributes if not specified
 ==
 2014-02-26 - v1.2
 * bugs:
 - if not supported back to the native video player
 ==
 2014-02-16 - v1.1
 + features
 - preview argument is optional
 * bugs:
 - localStorage in privacy mode
 - mobile fullscreen
 ==
 2014-01-25 - v1.0
 initial release

know bugs:
 - firefox with jpg width > 30.000px
 - safari (all platform)

 

Download

Download lastest version of VideoControls jQuery plugin
Source code is available on GitHub : https://github.com/pornzrus/videocontrols

Installation

1. Include the css on your html <head>

<link type="text/css" rel="stylesheet" href="jquery.videocontrols.css">

2. Include the script after the jQuery library

<script type="text/javascript" src="jquery.videocontrols.js">

3. Display the VideoControls on your <video>

<script type="text/javascript"> 
    $('video').videocontrols(); 
</script>

Options

markersarray of numbers
times in seconds to put markers on timebar
previewobject
spritesarray
sprites path
stepnumber
duration of each image in a sprite
heightnumber
height of a image in a sprite
widthnumber
width of a image in a sprite
widenumber
width of sprite
themeobject
progressbarstring
CSS class .progressbar-color-XXX called on the progressbar
rangestring
CSS class .vc-player.hover >.videocontrols >.videocontrols-seeker >.videocontrols-range:hover >.range-little-XXX called on the range
volumestring
CSS class .volumebar-color-XXX called on the volume

Methods

fillscreenToggle
toggle the fill screen
fullscreenToggle
toggle the full screen
mediumscreenToggle
toggle the medium screen
playToggle
play/pause the video

Events

durationchange
called when duration of the video change
end
called when the video is at end
fillscreenchange
called when fill screen change
fullscreenchange
called when full screen change
load
called when plugin is loaded
mediumscreenchange
called when medium screen change
pause
called when the video is paused
play
called when the video is played
seekchange
called when the seeker change
volumechange
called when volume change

 

 

Code

 
<video id="myVideo_demo" width="100%" height="100%" controls="controls"> 
    <source src="big_bunny_108p.mp4" type="video/mp4"> 
</video> 
 
<script type="text/javascript"> 
    $(document).ready(function () 
    { 
        $('#myVideo_demo').videocontrols( 
        { 
            markers: [4084158194236272317344397447490580], 
            preview: 
            { 
                sprites: ['big_bunny_108p_preview.jpg'], 
                step: 10, 
                width: 200 
            }, 
            theme: 
            { 
                progressbar: 'blue', 
                range: 'pink', 
                volume: 'pink' 
            } 
        }); 
    }); 
</script>

Credits

Demo movie from http://www.bigbuckbunny.org/
VideoControls liense is GPL v2 and is used for a better user experience on pornzR us

Archive file from GitHub

videocontrols-master (29.June.2015)

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*