HTML5 Background Player For Vimeo Videos mb vimeoPlayer - Free Download HTML5 Background Player For Vimeo Videos - mb.vimeoPlayer

Free Download HTML5 Background Player For Vimeo Videos – mb.vimeoPlayer

By Posted on

This time I will share jQuery Plugin and tutorial about HTML5 Background Player For Vimeo Videos – mb.vimeoPlayer, hope it will help you in programming stack.

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

Demo Download

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.

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.

view source
1 <link href="jquery.mb.vimeo_player.min.css" rel="stylesheet">
2 <script src="//code.jquery.com/jquery.min.js"></script>
3 <script src="jquery.mb.vimeo_player.min.js"></script>

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

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

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

view source
1 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.

view source
01 $("#bgndVideo").vimeo_player({
02   containment: "body",
03   ratio: "16/9", // "auto", "16/9", "4/3"
04   videoURL: null,
05   quality: "1080p", //4K, 2K, 1080p, 720p, 540p, 360p and 240p
06   startAt: 0,
07   stopAt: 0,
08   autoPlay: true,
09   vol: 50, // 1 to 100
10   addRaster: false,
11   opacity: 1,
12   mute: false,
13   loop: true,
14   showControls: true,
15   show_vimeo_logo: true,
16   stopMovieOnBlur: true,
17   realfullscreen: true,
18   mobileFallbackImage: null,
19   gaTrack: true,
20   optimizeDisplay: true,
21   mask: false,
22   align: "center,center", // top,bottom,left,right
23   onReady: function( player ) {}
24 });

5. Available methods to control the Vimeo video player.

view source
01 // play the video
02 myPlayer.v_play()
03  
04 // pause the video
05 myPlayer.v_pause()
06  
07 // set to fullscreen
08 myPlayer.v_fullscreen()
09  
10 // set  the volume
11 myPlayer.setVolume(20)
12  
13 // mute the video
14 myPlayer.v_mute()
15  
16 // unmute the video
17 myPlayer.v_unmute()
18  
19 // toggle the volume
20 myPlayer.v_toggleVolume()
21  
22 // set the alignment
23 myPlayer.setAlign('top,right')

6. Events.

view source
01 myPlayer.on("VPReady",function(e){
02   // When the video is ready
03 });
04  
05 myPlayer.on("VPStart",function(e){
06   // When the video start playing
07 });
08  
09 myPlayer.on("VPProgress",function(e){
10   // Fired every 200 ms when the video is in progress
11 });
12  
13 myPlayer.on("VPPlay",function(e){
14   // Each time the video changes from pause to play
15 });
16  
17 myPlayer.on("VPPause",function(e){
18   // When the video pauses
19 });
20  
21 myPlayer.on("VPEnd",function(e){
22   // When the video ends
23 });
24  
25 myPlayer.on("VPFullScreenStart",function(e){
26   // When the video goes fullscreen
27 });
28  
29 myPlayer.on("VPFullScreenEnd",function(e){
30   // When the video exits fullscreen
31 });
32  
33 myPlayer.on("VPMuted",function(e){
34   // When the video is muted
35 });
36  
37 myPlayer.on("VPUnmuted",function(e){
38   // When the video is unmuted
39 });
40  
41 myPlayer.on("VPTime",function(e){
42   // Fired every seconds
43 });

Changelog:

v1.2.0 (2021-01-10)

  • Added the quality parameter available for PRO and PLUS users

v1.2.0 (2020-11-27)

  • Bug fix: With the new Mac OS update (Big Sur) the browser user agent has changed and the os verification was firing a blocking bug.

2019-06-21

  • v1.1.9

2018-06-11

  • v1.1.8: Mobile copatibility

2018-05-24

  • v1.1.7: reduced the start time at 1150ms

2018-01-22

  • v1.1.6: Updated resize behavior to fix the flickering

2018-01-18

  • v1.1.4

2018-01-16

  • v1.1.3

2017-11-08

  • v1.1.2: Bug fix: the v_change_movie was not working

2017-11-01

  • v1.1.1

2017-10-31

  • player size fix

2017-09-05

  • v1.0.2

2017-06-24

  • iOs fix

2017-06-01

  • Release v1.0.11 stable

2017-05-12

  • OS detection for mobile fix

2017-05-11

  • Release v1.10.0 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

 

Related posts: