我需要在这里制作像这样的视频：
http://themes.laborator.co/aurum/fashion/home/home-4/?header-type=3&header-top-links=hide&header-cart-icon=5 我正在使用jquery插件。你可以在这里看到代码。
我需要做的第一件事就是使高度大约为550px，而不是像模板中那样具有一些模糊效果。
/*
jQuery backVid插件 作者：Rory Standley http://www.rstandley.co.uk 版本：1.0 根据MIT许可证获得许可 * /
（function（$，window）{
var backVid = function(node, options) {
// Establish our default settings
var settings = $.extend({
ratio: 16/9, // either 4/3 or 16/9
videoId: 'O_OKpl6u5P4',
mute: false,
repeat: true,
width: $(window).width(),
playButtonClass: 'backVid-play',
pauseButtonClass: 'backVid-pause',
muteButtonClass: 'backVid-mute',
unMuteButtonClass: 'backVid-unMute',
volumeUpClass: 'backVid-volume-up',
volumeDownClass: 'backVid-volume-down',
increaseVolumeBy: 10,
mobileBackgrounType: 'colour', // either image/colour
backgroundValue: 'rgb(0,0,0)', // either hex,RGB/Image URL - example (http://www.rstandley.co.uk/laboratory/url_shortner/UxWBHq)
videoFilter: false, // either false/lines/bricks/squares/waves/spots/dashes/crosses
start: 0
}, options);
// First we need to check to see if we have a mobile device or not
if (checkDevice()) {
// Now we need to append our div we will work with to the 'body'
wrapElements();
$('body').append(
$('<div />').attr('id','backVid-video-player')
.css({
'position':'inherit',
'left':0,
'top': -177,
'overflow':'hidden',
'z-index':'1',
'height':'100%',
'width':'100%'
})
);
// Lets build our background value for backVid-stop-clicks
switch(settings.videoFilter){
case 'false':
myFilterBG = '0';
break;
case 'lines':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAD0lEQVQImWNgQAX/yeAAAIHCA/0RE2WAAAAAAElFTkSuQmCC)';
break;
case 'bricks':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQImWNgwAT/yRf4j0vFfwAZXgb64t36UQAAAABJRU5ErkJggg==)';
break;
case 'squares':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAQElEQVQYlW2OwQ0AMAgCbw7XcMFubj81RVpeGgIcQHK1gJC/+shjtkLNTmpTaZMm05IB76YzfTedaW46k28Opg1VYQ5hW3JdzwAAAABJRU5ErkJggg==)';
break;
case 'waves':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAJElEQVQYlWNgwAT/sYjhVIRXMbokVsW4TPhPjCJi5clXTBwAAOy+CfekNMf3AAAAAElFTkSuQmCC)';
break;
case 'spots':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC)';
break;
case 'dashes':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAEklEQVQYlWNgoBL4T7GCoW8FAGEXBfvNSmHvAAAAAElFTkSuQmCC)';
break;
case 'crosses':
myFilterBG = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAMklEQVQYlWNgYGAwZkAFxjjEcApgSOKTIGgSVpOxKcKqmGiFRFuNUwCHGFaT8erCGuAAtV8HLQ/j6goAAAAASUVORK5CYII=)';
break;
default:
myFilterBG = '0'
}
// Now we need to add a layer to stop people clicking on the YouTube video
$('body').append(
$('<div />').attr('id','backVid-stop-clicks')
.css({
'width':'100%',
'height':'100%',
'z-index':'2',
'position':'fixed',
'left':0,
'top':-177,
'background-image': myFilterBG
})
);
} else {
// We have a mobile device, the auto play feature does not work, so we need to use a BG image/colour
if (settings.mobileBackgrounType == 'image') {
// We need to show the image url
if (settings.backgroundValue != '') {
// We can assume we have a value and we must assume that it is a link to an image
$('body').css({
'background': 'url('+settings.backgroundValue+') no-repeat center center fixed',
'-webkit-background-size': 'cover',
'-moz-background-size': 'cover',
'-o-background-size': 'cover',
'background-size': 'cover',
});
}
} else if (settings.mobileBackgrounType == 'colour') {
// We need to show a background colour
if (settings.backgroundValue != '') {
// We can assume we have a value and we must assume that it is a link to an image
$('body').css({
'background': settings.backgroundValue,
'height':'100%',
'width':'100%'
});
}
}
}
// We are using global space in order to talk with the YouTube API
window.player;
window.onYouTubeIframeAPIReady = function() {
player = new YT.Player('backVid-video-player', {
width: settings.width,
height: Math.ceil(settings.width / settings.ratio),
videoId: settings.videoId,
playerVars: {
controls: 0,
showinfo: 0,
modestbranding: 1,
wmode: 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
window.onPlayerReady = function(e) {
resize();
if (settings.mute) e.target.mute();
e.target.seekTo(settings.start);
e.target.playVideo();
}
window.onPlayerStateChange = function(state) {
if (state.data === 0 && settings.repeat) {
player.seekTo(settings.start);
}
}
// resize handler updates width, height and offset of player after resize/init
var resize = function() {
var width = $(window).width(),
pWidth,
height = $(window).height(),
pHeight,
$backVidPlayer = $('#backVid-video-player');
// when screen aspect ratio differs from video, video must center and underlay one dimension
if (width / settings.ratio < height) { // if new video height < window height (gap underneath)
pWidth = Math.ceil(height * settings.ratio); // get new player width
$backVidPlayer.width(pWidth).height(height).css({left: (width - pWidth) / 2, top: -117}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / settings.ratio); // get new player height
$backVidPlayer.width(width).height(pHeight).css({left: 0, top: -117}); // player height is greater, offset top; reset left
}
}
$('body').on('click','.' + settings.playButtonClass, function(e) { // play button
e.preventDefault();
player.playVideo();
}).on('click', '.' + settings.pauseButtonClass, function(e) { // pause button
e.preventDefault();
player.pauseVideo();
}).on('click', '.' + settings.muteButtonClass, function(e) { // mute button
e.preventDefault();
(player.isMuted()) ? player.unMute() : player.mute();
}).on('click', '.' + settings.volumeDownClass, function(e) { // volume down button
e.preventDefault();
var currentVolume = player.getVolume();
if (currentVolume < settings.increaseVolumeBy) currentVolume = settings.increaseVolumeBy;
player.setVolume(currentVolume - settings.increaseVolumeBy);
}).on('click', '.' + settings.volumeUpClass, function(e) { // volume up button
e.preventDefault();
if (player.isMuted()) player.unMute(); // if mute is on, unmute
var currentVolume = player.getVolume();
if (currentVolume > 100 - settings.increaseVolumeBy) currentVolume = 100 - settings.increaseVolumeBy;
player.setVolume(currentVolume + settings.increaseVolumeBy);
}).on('click', '.' + settings.unMuteButtonClass, function(e) { // mute button
e.preventDefault();
player.unMute()
});
}
// Load the YouTube API
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Lets create our Plugin
$.fn.backVid = function (options) {
return this.each(function () {
// First lets check to see if we have a mobile device or not
if (!$.data(this, 'backVid_instantiated')) { // let's only run one
$.data(this, 'backVid_instantiated',
backVid(this, options));
}
});
}
function checkDevice() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// some code..
return false;
} else {
return true;
}
}
function wrapElements() {
// We are going to wrapp all the elements so we can adjust the z-index
$('body').wrapInner($('<div />').attr('class','backVid-wrapper').css({
'position':'relative',
'z-index':'3'
})
);
}
})(jQuery, window);