Great jQuery plug-in that helps you generate a full-screen video background-BigVideo. js

Source: Internet
Author: User

Online Demo local download
Do you get tired of websites with the same picture as the background? No matter how you beautify the website or add cool special effects, images are still images. It will never make your page truly active.
The jQuery plug-in bigvideo. js we introduced today will definitely allow you to easily add a superb full-screen video background, so that your users may feel differently. I believe you will love it!
Main features
Dependent on vidoe. js, jQuery, jQuery UI
Realistic display of the video list
Ability to generate Adaptive Video backgrounds
If automatic playback is not supported, images can be displayed.
How to Use
Import the required class Library:
<! -- BigVideo Dependencies -->
<Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<Script src = "js/jquery-ui-1.8.22.custom.min.js"> </script>
<Script src = "js/jquery. imagesloaded. min. js"> </script>
<Script src = "http://vjs.zencdn.net/c/video.js"> </script>
To display the video background:
$ (Function (){
Var BV = new $. BigVideo ();
BV. init ();
BV. show ('HTTP: // video-js.zencoder.com/oceans-clip.mp4 ');
});
To quietly display multiple video backgrounds:
$ (Function (){
Var BV = new $. BigVideo ();
BV. init ();
Bv.show('vid1.mp4', 'vid2.mp4', 'vid3.mp4 '], {ambient: true });
});
If automatic playback is not supported, use the following fallback, which requires the support of modernizr:
Var BV = new $. BigVideo ();
BV. init ();
If (Modernizr. touch ){
BV.show('video-poster.jpg ');
} Else {
BV.show('video.mp4 ', {ambient: true });
}
Is it great? I hope you will have the opportunity to apply this plug-in on your website!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.