Customizable Video Background Plugin - Download Customizable Video Background Plugin - jQuery backgroundVideo

Download Customizable Video Background Plugin – jQuery backgroundVideo

By Posted on

This time I will share jQuery Plugin and tutorial about Customizable Video Background Plugin – jQuery backgroundVideo, hope it will help you in programming stack.

Customizable Video Background Plugin - Download Customizable Video Background Plugin - jQuery backgroundVideo
File Size: 5.18 KB
Views Total: 1814
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Yet another jQuery video background plugin to make your webpage more gorgeous and attractive.

The jQuery backgroundVideo plugin enables you to embed an HTML5 video into the page and make it as the background for the whole webpage or a specific container element.

Features autoplay, poster, controls, infinite loop, video preload, web video text tracks and much more.

Fore Chrome users, read this article: Autoplay Policy Changes

How to use it:

1. Download and load the backgroundVideo.js script after you’ve loaded jQuery library (slim build).

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
2         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
3         crossorigin="anonymous">
4 </script>
5 <script src="src/backgroundVideo.js"></script>

2. Call the function on the target container and specify the path your video file.

view source
1 <div class="wrapper">
2   ...
3 </div>
view source
1 $(".wrapper").backgroundVideo({
2   mp4: "bg.mp4"
3 });

3. Not only mp4, the plugin supports any type of video: ogg, webm, mpeg, m4v, etc.

view source
01 $(".wrapper").backgroundVideo({
02   mpeg: "path/to/mpeg-file",
03   mp4: "path/to/mp4-file",
04   webm: "path/to/webm-file",
05   ogg: "path/to/ogg-file",
06   quicktime: "path/to/quicktime-file",
07   x_msvideo: "path/to/x-msvideo-file",
08   m4v: "path/to/m4v-file",
09   rtf: "path/to/rtf-file",
10 });

4. Customize the video background with the following options.

view source
01 $(".wrapper").backgroundVideo({
02  
03   // enables autoplay
04   autoplay: true,
05  
06   // shows video controls
07   controls: false,
08    
09   // enables cross origin
10   crossOrigin: false,
11  
12   // Start and End time in the console
13   buffered: false,
14  
15   // "auto" | "metadata" | "none"
16   preload: false,
17  
18   // is muted?
19   muted: true,
20  
21   // enables infinite loop
22   loop: true,
23  
24   // path to poster image
25   poster: "path/to/image-file",
26  
27   // custom text when Your browser does not support HTML5 video
28   notSupportedText: "Your browser does not support HTML5 video.",
29  
30   // video ID
31   settingID: "myVideo",
32  
33   // shows web video text tracks information
34   track: false,
35   track_src: "path/to/vvt-file",
36   track_kind: "subtitle",
37   track_srclang: "en",
38   track_label: "test"
39    
40 });

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

source : jquery.net

Related posts: