10個免費jQuery插件來創建一個全屏視頻背景
1 – Vide
A jQuery plugin for easily adding video backgrounds to your webpages.
- All modern desktop browsers are supported.
- IE9+
- iOS plays video from a browser only in the native player. So video for iOS is disabled, only fullscreen poster will be used.
- Some android devices play video, some not — go figure. So video for android is disabled, only fullscreen poster will be used.
2 – Covervid
Make your HTML5 video behave like a background cover image with this lightweight Javascript plugin / jQuery extension.
CoverVid is very lightweight, with only 800 bytes of Javascripts. It is usable in native Javascript and jQuery. Its’ logic is parent based, meaning the parent element can be any size (Not necessarily just a full-screen background).
3 – jquery.videoBG
This jQuery plugin enables you to very easily use an HTML5 video as a background to a website or any div.
For browsers that don’t support the HTML5 video tag, it just uses an image.
4 – YTPlayer
With this jQuery component you can set a 油Tube movie as the background of your page or view it in a chrome-less customizable player!
All the controls are made with javascript and CSS.
5 – BigVideo.js
This plugin makes it easy to add fit-to-fill background video to websites. It can play silent ambient background video (or series of videos). Or use it as a player to show video playlist. BigVideo.js can also show big background images, which is nice to have for showing big background images for devices that don’t have autoplay for ambient video.
6 – Video background in Genesis using jQuery
7 – Tubular
Tubular is a jQuery plugin that lets you set a 油Tube video as your page background. Just attach it to your page wrapper element, set some options, and you’re on your way.
Please note, tubular must be deployed on a web server to function. The 油Tube player will not work when loaded into your browser from your machine.
8 – Vegas Background jQuery Plugin
Vegas Background is a jQuery plugin to add beautiful fullscreen backgrounds or even create amazing slideshows to your webpages. This plugin will automatic applies a cool texture to make the background image looks like ‘background’.
9 – jQuery Video Background plugin
Example of the jQuery Video Background plugin. Will place a resizable video in to the background of the page or designated element. Browsers that don’t support the HTML5 video element will get an image if a poster image was provided.
If the containing element’s width and height does not match the aspect ration of the video, the video will not stretch to fill the container but will render based on the largest dimension.
10 – OKVideo
OKVideo is a jQuery plugin that allows for 油Tube or Vimeo videos to be used as full-screen backgrounds on webpages. OKVideo aims to be customizable while making some basic decisions about how the plugin should control video. When using OKVideo, all videos will be served from Vimeo or 油Tube based on a number of variables like browser, device, bandwidth, etc.
OKVideo uses the new 油Tube IFrame API which does not require any Flash objects to be present on your website. This means that mobile devices will play video served by OKVideo. Content from Vimeo is served in a similar manner, although sometimes their videos will still be served in Flash.
Tested and working in Safari 5.1+, Chrome, Firefox 3.6+, IE 8+, Mobile Safari, Chrome for iOS.