🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A jQuery video plugin which provides useful methods and events to control Youtube / Video / Html5 videos from JavaScript.

video Youtube Vimeo

Documentation

jQuery Video Controller

This video plugin for jQuery allows you to control HTML5, Youtube and Vimeo videos with the same functions and the same syntax.

Demo

Dependencies

Installation

  • Download the file jquery.video.min.js
  • Upload it to your server (e.g. /js/ folder)
  • Embed the file in your html code: <script src="/js/jquery.video.min.js"></script>

Use

Each of the following functions can be triggered on one or multiple videos.

Initialize video(s)

Initializes the video(s) and change default settings if necessary.

$('.video').video({     attr_ready: 'data-video-ready',     attr_playing: 'data-video-playing',     attr_paused: 'data-video-paused' }); // or $('.video').initVideo( ... );

Play videos

Plays or resumes the video(s).

$('.video').playVideo(); // or $('.video').video('play');

Pause videos

Pauses the video(s) at the current position.

$('.video').pauseVideo(); // or $('.video').video('pause');

Stop videos

Stops the video(s). HTML5 and Vimeo videos will stop and reset to the initial state. Youtube videos will jump to the end of the video (and trigger the finish event).

$('.video').stopVideo(); // or $('.video').video('stop');

Restart videos

Jump to the beginning of the video(s) and restart playing.

$('.video').restartVideo(); // or $('.video').video('restart');

Mute videos

Mute the video(s)

$('.video').muteVideo(); // or $('.video').video('mute');

Unmute videos

Unmute the video(s). The volume of Vimeo videos will be set to 1 (max) instead of changing back to the previous volume.

$('.video').unmuteVideo(); // or $('.video').video('unmute');

Jump to position

Jumps to a defined position (seconds) in the videos.

$('.video').seekToVideo(30); // or $('.video').video('seekTo', 30);

Add event to video

Adds an event to a video.

$('.video').addVideoEvent('play', onPlay); // or $('.video').video('addVideoEvent', 'play', onPlay);

Remove event from video

Removes an event from a video.

$('.video').removeVideoEvent('play'); // or $('.video').video('removeVideoEvent', 'play');

Events

onReady

Triggers if a video is loaded and ready.

$('.video').addVideoEvent('ready', onReady); // or $('.video').video('addVideoEvent', 'ready', onReady);

onPlay

Triggers on play or resume.

$('.video').addVideoEvent('play', onPlay); // or $('.video').video('addVideoEvent', 'play', onPlay);

onPause

Triggers on pause.

$('.video').addVideoEvent('pause', onPause); // or $('.video').video('addVideoEvent', 'pause', onPause);

onFinish

Triggers has reached the end and is finished. The stop method on Youtube videos will trigger this event too.

$('.video').addVideoEvent('finish', onFinish); // or $('.video').video('addVideoEvent', 'finish', onFinish);

onDestroy

Triggers if the video is destroyed through the destroy method above.

$('.video').addVideoEvent('destroy', onDestroy); // or $('.video').video('addVideoEvent', 'destroy', onDestroy);

Global settings

The following settings are global for all videos:

// The suffix for all the video events (for unique purposes) $.video.event_suffix = '_video'; // An array with callbacks for the onYouTubeIframeAPIReady() call $.video.youtube_api_ready_callbacks = [], // The youtube iframe api url $.video.youtube_iframe_api = 'https://www.youtube.com/iframe_api'

Todo

  • more events and methods
  • settings (autoplay etc.)

Changelog

v0.1.3 (2015-12-07)
  • postmessage function fixed
v0.1.2 (2015-10-02)
  • demo page added
  • html5 video ready event fixed
v0.1.1 (2015-09-11)
  • removeEvent bug fixed,
  • play event now triggers on autoplay html5 videos
v0.1.0 (2015-06-10)

Initial release


You May Also Like