HTML5 Background Player For Vimeo Videos - mb.vimeoPlayer

HTML5 Background Player For Vimeo Videos - mb.vimeoPlayer
File Size: 248 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

mb.vimeoPlayer is a jQuery HTML5 video background plugin which allows you to insert a responsive, fully controllable Vimeo video player as the background of any container element.

See also:

How to use it:

1. Load the latest version of jQuery library and the jQuery mb.vimeoPlayer.js plugin's files in your html page.

<link href="jquery.mb.vimeo_player.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="jquery.mb.vimeo_player.min.js"></script>

2. Insert a Viemo video player into the page as this:

<a id="bgndVideo" class="player" 
   data-property="{videoURL:'https://vimeo.com/VIDEO-ID'}">
   My video background
</a>

3. Call the function to initialize the Vimeo video player with default settings.

myPlayer = $("#bgndVideo").vimeo_player();

4. All default settings which can be passed to the vimeo_player() method or via data-property attribute as shown above.

$("#bgndVideo").vimeo_player({
  containment: "body",
  ratio: "16/9", // "auto", "16/9", "4/3"
  videoURL: null,
  startAt: 0,
  stopAt: 0,
  autoPlay: true,
  vol: 50, // 1 to 100
  addRaster: false,
  opacity: 1,
  mute: false,
  loop: true,
  showControls: true,
  show_vimeo_logo: true,
  stopMovieOnBlur: true,
  realfullscreen: true,
  mobileFallbackImage: null,
  gaTrack: true,
  optimizeDisplay: true,
  mask: false,
  align: "center,center", // top,bottom,left,right
  onReady: function( player ) {}
});

5. Available methods to control the Vimeo video player.

// play the video
myPlayer.v_play()

// pause the video
myPlayer.v_pause()

// set to fullscreen
myPlayer.v_fullscreen()

// set  the volume
myPlayer.setVolume(20)

// mute the video
myPlayer.v_mute()

// unmute the video
myPlayer.v_unmute()

// toggle the volume
myPlayer.v_toggleVolume()

// set the alignment
myPlayer.setAlign('top,right')

6. Events.

myPlayer.on("VPReady",function(e){
  // When the video is ready
});

myPlayer.on("VPStart",function(e){
  // When the video start playing
});

myPlayer.on("VPProgress",function(e){
  // Fired every 200 ms when the video is in progress
});

myPlayer.on("VPPlay",function(e){
  // Each time the video changes from pause to play
});

myPlayer.on("VPPause",function(e){
  // When the video pauses
});

myPlayer.on("VPEnd",function(e){
  // When the video ends
});

myPlayer.on("VPFullScreenStart",function(e){
  // When the video goes fullscreen
});

myPlayer.on("VPFullScreenEnd",function(e){
  // When the video exits fullscreen
});

myPlayer.on("VPMuted",function(e){
  // When the video is muted
});

myPlayer.on("VPUnmuted",function(e){
  // When the video is unmuted
});

myPlayer.on("VPTime",function(e){
  // Fired every seconds
});

Change logs:

2017-04-22

  • Release v1.0.9 stable

2017-04-19

  • Bug fix: At video start the audio was on for 1 sec. also if the mute option was set to true.

2017-04-12

  • Bug fix: the audio was there for the first second even if mute was set to true

2017-04-11

  • Release v1.0.7 stable

2017-03-28

  • Added event VPProgress

2017-03-22

  • Release v1.0.6 stable

2017-03-21

  • Release v1.0.5 stable

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