jQuery Based Youtube / Vimeo / HTML5 Video Controller

jQuery Based Youtube / Vimeo / HTML5 Video Controller
File Size: 15.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

Basic usage:

1. Include jQuery library and the jQuery Video Controller plugin at the bottom of the html page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.video.js"></script>

2. Add your images into the web page.

<iframe class="video" src="YOUTUBE/VIMEO VIDEO"></iframe>
<video class="video" controls="">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

3. Initialize the plugin and we're ready to go.

$('.video').video();

4. Play all videos.

$('.video').playVideo();

5. Pause all videos.

$('.video').pauseVideo();

6. Stop all videos.

$('.video').stopVideo();

7. Restart all videos.

$('.video').restartVideo();

8. Mute all videos.

$('.video').muteVideo();

9. Unmute all videos.

$('.video').unmuteVideo();

10. Seek to 20 sec.

$('.video').seekToVideo(30);

11. Add events to videos.

$('.video').addVideoEvent('ready', function(e, $video, video_type) {
  // Triggers if a video is ready.
});

$('.video').addVideoEvent('play', function(e, $video, video_type) {
  // Triggers on play or resume
});

$('.video').addVideoEvent('pause', function(e, $video, video_type) {
  // Triggers on pause
});

$('.video').addVideoEvent('finish', function(e, $video, video_type) {
  // Triggers if a video is finished
});

Change log:

2015-12-08

  • postmessage function fixed

This awesome jQuery plugin is developed by faktorvier. For more Advanced Usages, please check the demo page or visit the official website.