jQuery Based Youtube / Vimeo / HTML5 Video Controller

File Size: | 15.5 KB |
---|---|
Views Total: | 5001 |
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.