Home

bogdan

jQvid.js - cross browser html5 video player

Very easy to use & integrate in own app : 

$('video_wrapper').jQvid(options);
/*
options = {
    optionName : optionValue,
    // and so on
}
*/

The plugin dynamically creates the video element and appends it into the selected target (wrapper). It provides default controls that can be customized with css, but you can specify your own html markup for the controls by providing an external (yet in the same domain) html file.
The player triggers events for any type of action that occurs. All the events are namespaced with the ".jqvid" namespace. Here's the event list with the proper explanation :

  • initialise - triggered when the player is initialized
  • controlsreset - triggered when the html controls are reset (to "fabric" settings such as volume to default)
  • resize - triggered when the player is resized (on fullscreen toggles and aspectratio resizes)
  • fullscreen - triggered when the video is going from normal screen in full screen mode
  • normalscreen - triggered when the video is going from full screen in normal screen mode
  • loadvideo - triggered when the video's src has changed
  • loadstart - triggered when the video has started to load
  • loadedmetadata - triggered when the metadata has been loaded (after this point you we can now know the full size/time of the video)
  • loadeddata - triggered when the video can render the media data at the current playback position for the first time
  • buffered - triggered when the video buffers
  • waiting - triggered when the video has stopped because the next frame is not available
  • durationchange - triggered when the movie duration has changed
  • timeupdate - triggered when the current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously
  • progress - triggered when the video is showing new content
  • ratechange - triggered when the video rate has changed (normal is 1... eq: 1.2=faster)
  • seeking - triggered when the video is seeking and the operation takes enough time that it can send the event
  • seeked - triggered when the seeking has stopped
  • ended - triggered when the video reached the end
  • canplay - triggered the video can resume playback of the media data, but estimates that if playback were to be started now, the media resource could not be rendered at the current playback rate up to its end without having to stop for further buffering of content
  • canplaythrough - triggered when the player can play the whole video (at current playback rate) withouth stopping
  • play - triggered when the movie starts to play
  • playing - triggered when the video is restarting to play (after a pause or a lack of media data)
  • pause - triggered when the video is being paused
  • volumechange - triggered when the volume changes
  • mute - triggered when the volume changes to 0
  • unmute - triggered when the volume changes from 0

Besides event-triggering, this plugin offers an api. The jQvid api is binded to every element on wich the plugin is called. It can be accessed through jquery's .data method : 

var api = $('video_wrapper').data('jqvidApi');

This api reveals some usefull methods that ease the video interaction & manipulation:

  • play
    • desc : it starts to play/resumes the video and triggers the play.jqvid event
  • pause
    • desc : it pauses the video and triggers the pause.jqvid event
  • togglePlay
    • desc : toggles the pause/play state of the video while triggering the associated events.
  • seekToTime
    • desc : it moves the videoframe to the frame that correspons with the provided time as argument.
    • arguments : number representing the seconds that the player should seek the frame for.
    • obs : if it's a negative number, the video will seek at 0 seconds, and if it's a number higher than the video length (in seconds), the player will seek to the end of the video.
  • seekToPercent
    • desc : it moves the videoframe to the frame that corresponds to the provided percentage as argument.
    • arguments : number representing the percentage of the video length to which the player should seek video frames.
    • obs : the argument's value is trimmed if not in the [0-100] range.
  • fullScreen
    • desc : it resizes the video to the window size and triggers the fullscreen.jqvid event.
  • normalScreen
    • desc : it resizes the video to the initial size from the fullscreen state. It alse triggers the normalscreen.jqvid event.
  • toggleFullScreen
    • desc : toggles the video size (fullscreen/normalscreen) and triggers the associated events.
  • setVolume
    • desc : sets the video volume to the percentige provided as argument and triggers volumechange.jqvid event.
    • arguments : number representing the percentage of the video volume
    • obs : the argument's value is trimmed if not in the [0-100] range. Also, the custom volumechange.jqvid event provides 2 more arguments : oldVolume and newVolume.
  • mute
    • desc : mutes the video and triggers the mute.jqvid event.
  • unMute
    • desc : unmutes the video and sets the sound volume to the value before the video had been muted. Also it triggers the unmute.jqvid event.
    • obs : The custom unmute.jqvid event provides one more arguments : oldVolume.
  • toggleMute
    • desc : toggles the video sound (mute/unmute) and triggers the associated events.
  • loadVideo
    • desc : loads the video provided as first argument in the player and triggers the loadvideo.jqvid event.
    • arguments : (source [,type]). The source represents the video path (full or relative) and the second (optional) argument provides the video type (such as "video/mp4" or "video/ogg")
    • obs : Usefull when using playlists.
    • usage :
      $('#video_wrapper').data('jqvidApi').loadVideo('path_to_video','video_type');
  • resetControls
    • desc : resets the controls to their original state (progress=>0,play_btn=>paused) and triggers the controlsreset.jqvid event.

developed by

Project Admins:

download here :

MongoDB Logo MongoDB