播放视频脚本幻灯片时遇到问题。 我添加“自动播放”标签,但只有第一个视频播放得很好。 另一个不玩。 我认为解决方案是: 幻灯片放映时,屏幕上播放视频,视频播放自动播放。 但我不知道该怎么做。 我需要你的帮助。 谢谢大家..
这是slideshow.js 此脚本从xml文件中读取有关图像和视频的信息。 `
(function (a) {
var h = {
init: function (c) {
function b(d, a) {
var b = d.data("slideshow");
a++;
d.find(".progbar div").animate({
width: 100 * (a / b.slides.length) + "%"
}, b.settings.progbarSpeed, "linear", function () {
b.loaded++;
b.loaded >= b.slides.length && (d.find(".progbar").hide(), b.settings.displayNavigation && 0 == b.settings.fadeInNavSpeed && 0 == b.settings.fadeOutNavSpeed && d.find(".slideshow-nav").show(), d.slideshow("show", 0), d.slideshow("start"))
})
}
function l(a, b) {
var c = b.innerWidth(),
e = b.innerHeight(),
f = "";
a.is("[style]") && (f = a.attr("style") + ";");
a.is("[marginLeft]") && (f += "margin-left:" + parseFloat(a.attr("marginLeft"), 10) * c + "px;");
a.is("[marginTop]") && (f += "margin-top:" + parseFloat(a.attr("marginTop"), 10) * e + "px;");
a.is("[width]") && (f += "width:" + parseFloat(a.attr("width"), 10) * c + "px;");
a.attr("height") && (f += "height:" + parseFloat(a.attr("height"), 10) * e + "px;");
return f
}
function e(a) {
return a.is("[classname]") ? a.attr("classname") : ""
}
return this.each(function () {
var idplay = '1',
d = a(this),
h = d.data("slideshow"),
i = a.extend({
placeholder: "jQuery XML Slideshow Not Available",
duration: 5E3,
fadeInDuration: 500,
fadeOutDuration: 500,
fadeInDelayOnLoad: 1E3,
progbarSpeed: 150,
displayTooltips: !0,
fadeInNavSpeed: 250,
fadeOutNavSpeed: 2500,
displayNavigation: !0
}, c);
if (!h) {
var j = [],
f = "",
k = "",
g = 0;
d.addClass("slideshow");
a.ajax({
url: i.xmlsource,
async: !1,
success: function (b) {
a(b).find("slideshow").each(function () {
a(this).is("[stylesheet]") && (a("head").append("<link>"), a("head").children(":last").attr({
rel: "stylesheet",
type: "text/css",
href: a(this).attr("stylesheet")
}))
});
a(b).find("slide").each(function () {
var b = i.duration;
a(this).attr("duration") && (b = a(this).attr("duration"));
var c = a(this).find("title");
f += '<div class="slide">';
//f+='<div class="slideshow-layer title '+e(c)+'" style="'+l(c,d)+'"><p>'+c.text()+"</p></div>";
a(this).find("content").each(function () {
//f+='<div class="slideshow-layer text scrollable '+e(a(this))+'" style="'+l(a(this),d)+'">'+a(this).text()+"</div>"
});
a(this).find("media").each(function () {
"image" == a(this).attr("type") && (f += '<img src="' + a(this).attr("src") + '" alt="'
+ a(this).attr("alt") + '" />')
});
a(this).find("media").each(function () {
"video" == a(this).attr("type") && (f += '<video id="Video1" type="video/webm" idplay="'
+ idplay + '" src="' + a(this).attr("src") + '" />')
});
f += "</div>";
k += '<li><div class="tooltip">' + c.text() + '</div><a number="' + g + '"></a></li>';
j[g] = {
duration: parseInt(b, 10),
object: null,
navlink: null,
tooltip: null
};
g++
})
}
});
d.html('<div class="slideshow-layer slideshow-nav"><ul>' + k + '</ul></div><div class="slideshow-layer noslides">'
+ i.placeholder + '</div><div class="slideshow-layer progbar"><div></div></div><div class="slideshow-slides">' + f + "</div>");
g = 0;
d.find(".slide").each(function () {
j[g++].object = a(this)
});
g = 0;
d.find(".slideshow-nav ul li a").each(function () {
j[g++].navlink = a(this);
a(this).click(function () {
d.slideshow("pause");
d.slideshow("show", a(this).attr("number"))
});
i.displayTooltips && a(this).hover(function () {
a(this).prev().show()
}, function () {
a(this).prev().hide()
})
});
a(this).data("slideshow", {
target: d,
slides: j,
active: -1,
timer: null,
settings: i,
loaded: 0
});
d.hover(function () {
d.slideshow("pause")
},
function () {
d.slideshow("start")
});
0 < g ? (g = 0, 0 < i.progbarSpeed && d.find(".progbar").show(),
d.find(".slide").each(function () {
a().waitForImages ? a(this).waitForImages(function () {
b(d, ++g)
}) : (i.progbarSpeed = 50, b(d, ++g))
})) : d.find(".noslides")
.each(function () {
a(this).delay(500).fadeIn()
})
}
})
},
destroy: function () {
return this.each(function () {
var c = a(this),
b = c.data("slideshow");
a(window).unbind(".slideshow");
b.slideshow.remove();
c.removeData("slideshow")
})
},
show: function (c, b) {
return this.each(function () {
var h = a(this),
e = h.data("slideshow");
if (-1 == c) {
var d = e.active;
c = ++d % e.slides.length
}
e.active != c && (0 <= e.active ? (e.slides[e.active].navlink.removeClass("active"),
e.slides[c].navlink.addClass("active"),
e.slides[e.active].object.fadeOut(e.settings.fadeOutDuration, function () {
h.find(".slides").css("display:none");
e.active = c;
e.slides[e.active].object.fadeIn(e.settings.fadeInDuration,
function () {
"function" == typeof b && b()
})
})) : (e.active = c, e.slides[e.active].navlink.addClass("active"),
e.slides[e.active].object.fadeIn(e.settings.fadeInDuration, function () {
"function" == typeof b && b()
})))
})
},
start: function () {
return this.each(function () {
var c = a(this),
b = c.data("slideshow");
0 <= b.active && (b.timer && clearTimeout(b.timer),
b.timer = setTimeout(function () {
c.slideshow("show", -1, function () {
c.slideshow("start")
});
b.settings.displayNavigation && (0 < b.settings.fadeInNavSpeed || 0 < b.settings.fadeOutNavSpeed) && c.find(".slideshow-nav").delay(100)
.fadeOut(b.settings.fadeOutNavSpeed)
}, b.slides[b.active].duration))
})
//if(idplay=='1'){video.play();}
},
pause: function () {
return this.each(function () {
var c = a(this),
b = c.data("slideshow");
b.settings.displayNavigation && (0 < b.settings.fadeInNavSpeed || 0 < b.settings.fadeOutNavSpeed) && c.find(".slideshow-nav").delay(100)
.fadeIn(b.settings.fadeInNavSpeed);
b.timer && (clearTimeout(b.timer), b.timer = null)
})
}
};
a.fn.slideshow = function (c) {
if (h[c]) return h[c].apply(this, Array.prototype.slice.call(arguments, 1));
if ("object" === typeof c || !c) return h.init.apply(this, arguments);
a.error("Method " + c + " does not exist on jQuery.slideshow")
}
})(jQuery);