This video plugin for jQuery allows you to control HTML5, Youtube and Vimeo videos with the same functions and the same syntax.
- 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>
Each of the following functions can be triggered on one or multiple videos.
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( ... );Plays or resumes the video(s).
$('.video').playVideo();
// or
$('.video').video('play');Pauses the video(s) at the current position.
$('.video').pauseVideo();
// or
$('.video').video('pause');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');Jump to the beginning of the video(s) and restart playing.
$('.video').restartVideo();
// or
$('.video').video('restart');Mute the video(s)
$('.video').muteVideo();
// or
$('.video').video('mute');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');Jumps to a defined position (seconds) in the videos.
$('.video').seekToVideo(30);
// or
$('.video').video('seekTo', 30);Adds an event to a video.
$('.video').addVideoEvent('play', onPlay);
// or
$('.video').video('addVideoEvent', 'play', onPlay);Removes an event from a video.
$('.video').removeVideoEvent('play');
// or
$('.video').video('removeVideoEvent', 'play');Triggers if a video is loaded and ready.
$('.video').addVideoEvent('ready', onReady);
// or
$('.video').video('addVideoEvent', 'ready', onReady);Triggers on play or resume.
$('.video').addVideoEvent('play', onPlay);
// or
$('.video').video('addVideoEvent', 'play', onPlay);Triggers on pause.
$('.video').addVideoEvent('pause', onPause);
// or
$('.video').video('addVideoEvent', 'pause', onPause);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);Triggers if the video is destroyed through the destroy method above.
$('.video').addVideoEvent('destroy', onDestroy);
// or
$('.video').video('addVideoEvent', 'destroy', onDestroy);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'- more events and methods
- settings (autoplay etc.)
- fix for missing video configuration
- postmessage function fixed
- demo page added
- html5 video ready event fixed
- removeEvent bug fixed,
- play event now triggers on autoplay html5 videos
Initial release