我正在修改一个名为backstretch（找到here）的背景图片拉伸脚本，以便在浏览器中将HTML5视频拉伸为全屏背景。
我在Chrome，Safari和FireFox中使用了以下代码，然而，在IE9中（令人惊讶，惊讶）它并没有将这些附加附加到不同来源的视频元素。
$('video').append("<source src='"+src+".webm' type='video/webm' />");
$('video').append("<source src='"+src+".ogv' type='video/ogg' />");
$('video').append("<source src='"+src+".mp4' type='video/mp4' />");
以下是整个脚本。任何想法或帮助非常感谢！提前谢谢！
/*
* jQuery Backstretch
* Version 1.2.8
* http://srobbin.com/jquery-plugins/jquery-backstretch/
*
* Add a dynamically-resized background image to the page
*
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Licensed under the MIT license
* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt
*
*/
;(function($) {
$.backstretchvideo = function(src, options, callback) {
var defaultSettings = {
centeredX: true // Should we center the image on the X axis?
, centeredY: true // Should we center the image on the Y axis?
, speed: 0 // fadeIn speed for background after image loads (e.g. "fast" or 500)
}
, $container = $("#backstretch")
, settings = $container.data("settings") || defaultSettings // If this has been called once before, use the old settings as the default
, existingSettings = $container.data('settings')
, rootElement, supportsFixedPosition, useWindowInnerHeight
, imgRatio, bgImg, bgWidth, bgHeight, bgOffset, bgCSS;
// Extend the settings with those the user has provided
if(options && typeof options == "object") $.extend(settings, options);
// Just in case the user passed in a function without options
if(options && typeof options == "function") callback = options;
$(document).ready(function() {
/*
* Taken from jQuery Mobile 1.1.0
* http://jquerymobile.com/
*
* In a nutshell, we need to figure out if fixed positioning is supported.
* Unfortunately, this is very difficult to do on iOS, and usually involves
* injecting content, scrolling the page, etc.. It's ugly.
* jQuery Mobile uses this workaround. It's not ideal, but works.
*
* Modified to detect IE6
*/
var w = window
, ua = navigator.userAgent
, platform = navigator.platform
// Rendering engine is Webkit, and capture major version
, wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ )
, wkversion = !!wkmatch && wkmatch[ 1 ]
, ffmatch = ua.match( /Fennec\/([0-9]+)/ )
, ffversion = !!ffmatch && ffmatch[ 1 ]
, operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ )
, omversion = !!operammobilematch && operammobilematch[ 1 ]
, iematch = ua.match( /MSIE ([0-9]+)/ )
, ieversion = !!iematch && iematch[ 1 ];
supportsFixedPosition = !(
// iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
(( platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1 || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534 )
||
// Opera Mini
( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" )
||
( operammobilematch && omversion < 7458 )
||
//Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
( ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533 )
||
// Firefox Mobile before 6.0 -
( ffversion && ffversion < 6 )
||
// WebOS less than 3
( "palmGetResource" in window && wkversion && wkversion < 534 )
||
// MeeGo
( ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1 )
||
// IE6
( ieversion && ieversion <= 6)
);
// Set the root element
rootElement = supportsFixedPosition ? $(window) : $(document);
// Should we use the window's innerHeight?
useWindowInnerHeight = supportsFixedPosition && window.innerHeight;
// Initialize the plugin
_init();
});
// For chaining
return this;
function _init() {
// Prepend image, wrapped in a DIV, with some positioning and zIndex voodoo
if(src) {
var img;
// If this is the first time that backstretch is being called
if($container.length == 0) {
$container = $("<div />").attr("id", "backstretch")
.css({left: 0, top: 0, position: supportsFixedPosition ? "fixed" : "absolute", overflow: "hidden", zIndex: -999999, margin: 0, padding: 0, height: "100%", width: "100%"});
} else {
// Prepare to delete any old images
$container.find("video").addClass("deleteable");
}
/* img = $("<img />").css({position: "absolute", display: "none", margin: 0, padding: 0, border: "none", zIndex: -999999, maxWidth: "none"})
.bind("load", function(e) { */
//Video Background
src = src.substring(0, src.length - 4)
img = $('<video poster="'+src+'_poster.jpg" autoplay="autoplay" loop="loop" class="backstrech_video_background" />')
// Moved CSS to Stylesheet
//.css({position: "relative", display: "none", margin: 0, padding: 0, border: "none", zIndex: -999999, maxWidth: "none"})
.bind("play", function(e) {
var $self = $(this),
imgWidth, imgHeight;
$self.css({width: "inherit", height: "auto"});
imgWidth = this.width || $(e.target).width();
imgHeight = this.height || $(e.target).height();
imgRatio = imgWidth / imgHeight;
_adjustBG();
$self.fadeIn(settings.speed, function(){
// Remove the old images, if necessary.
$container.find('.deleteable').remove();
// Callback
if(typeof callback == "function") callback();
});
})
.appendTo($container);
// Append the container to the body, if it's not already there
if($("body #backstretch").length == 0) {
/*
* Scroll the page one pixel to get the right window height on iOS
* Pretty harmless for everyone else
*/
if ($(window).scrollTop() === 0 ) window.scrollTo(0, 0);
$("body").append($container);
}
// Attach the settings
$container.data("settings", settings);
//video.attr("src", src); // Hack for IE img onload event
$('video').append("<source src='"+src+".webm' type='video/webm' />");
$('video').append("<source src='"+src+".ogv' type='video/ogg' />");
$('video').append("<source src='"+src+".mp4' type='video/mp4' />");
// Adjust the background size when the window is resized or orientation has changed (iOS)
$(window).unbind("resize.backstretch").bind("resize.backstretch", function() {
// Need to do this in order to get the right window height
if("onorientationchange" in window) {
if (window.pageYOffset === 0) window.scrollTo(0, 1);
}
_adjustBG()
});
}
}
function _adjustBG() {
try {
bgCSS = {left: 0, top: 0}
, rootWidth = bgWidth = rootElement.width()
, rootHeight = useWindowInnerHeight ? window.innerHeight : rootElement.height()
, bgHeight = bgWidth / imgRatio;
// Make adjustments based on image ratio
// Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
if(bgHeight >= rootHeight) {
bgOffset = (bgHeight - rootHeight) /2;
if(settings.centeredY) bgCSS.top = "-" + bgOffset + "px";
} else {
bgHeight = rootHeight;
bgWidth = bgHeight * imgRatio;
bgOffset = (bgWidth - rootWidth) / 2;
if(settings.centeredX) bgCSS.left = "-" + bgOffset + "px";
}
$container.css({width: rootWidth, height: rootHeight})
.find("video").css({width: bgWidth, height: bgHeight}).css(bgCSS);
} catch(err) {
// IE7 seems to trigger _adjustBG before the image is loaded.
// This try/catch block is a hack to let it fail gracefully.
}
}
};
})(jQuery);
答案 0 :(得分：0)
我遇到了同样的问题。我花了一个小时试图找到问题的根源，我发现由于一些奇怪的原因，IE将不包含源元素。我尝试了其他一切......即使我将元素名称更改为“sourc”，它也可以。
可能唯一的解决方法是将整个视频元素与源标记作为一个字符串附加。在我的情况下（我已经在php中生成了视频文件），我必须使用
获取起始视频标签var video_html = $( '#sve_video' ).clone().wrap('<div>').parent().html();
我只想更改源标记，如果它们不存在，只需插入我的新标记：
// get first occurence of '<source'
var first_src_pos = video_html.indexOf('<source');
// trim string either before first source, or before closing video tag
var video_start_tag_end = ( first_src_pos > 0 )
? first_src_pos
: video_html.length - 8;
var video_start_tag = video_html.substring( 0, video_start_tag_end );