jquery幻灯片:在屏幕上播放视频

时间:2015-10-07 16:11:01

标签: jquery image video slideshow

播放视频脚本幻灯片时遇到问题。 我添加“自动播放”标签,但只有第一个视频播放得很好。 另一个不玩。 我认为解决方案是: 幻灯片放映时,屏幕上播放视频,视频播放自动播放。 但我不知道该怎么做。 我需要你的帮助。 谢谢大家..

这是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);

0 个答案:

没有答案