Question

我刚刚在jwplayer中包含了lightsout olugin，所以当我在我的页面中添加jwplayer代码时它的工作正常，但是当我用iframe调用jwplayer时，在iframe中运行的灯光插件工作并且不再对页面产生任何影响。

下面我有javascript

(function(e) {
    function t(t, n, i) {
        function a() {
            for (var e in g) n[e] === void 0 && (n[e] = g[e]);
            if (y = document.createElement("div"), y.className += " BSlightsout_shade", y.style.display = "none", y.style.backgroundColor = "#" + n.backgroundcolor, y.style.zIndex = 0, y.style.opacity = 0, y.style.filter = "alpha(opacity=0)", y.style.top = 0, y.style.left = 0, y.style.bottom = 0, y.style.right = 0, n.parentid ? (y.style.position = "absolute", document.getElementById(n.parentid).style.position = "relative", document.getElementById(n.parentid).appendChild(y)) : (y.style.position = "fixed", document.body.appendChild(y)), y.onclick = r, p = new o(y, n.time, n.opacity, s), u.on = p.on, u.off = p.off, u.toggle = p.toggle, n.dockicon === !0 && typeof t.addButton == "function") {
                var i = l + "BSlightsout.png";
                t.addButton(i, "Cinema Mode", p.toggle, "BSlightsout")
            }
            t.onIdle(d), t.onPlay(d), t.onPause(d), t.onComplete(f)
        }

        function s() {
            var o, n = 0;
            while ((o = e(n++)) && o.hasOwnProperty("id") && 100 > n) c(o, "auto");
            c(t, 301)
        }

        function c(e, t) {
            e.getRenderingMode() === "html5" ? e.getContainer().style.zIndex = t : e.getContainer().parentNode.style.zIndex = t
        }

        function r() {
            t.pause(!0), p.on()
        }

        function f() {
            n.oncomplete == "off" ? p.off() : p.on()
        }

        function d() {
            switch (t.getState()) {
                case "IDLE":
                    n.onidle == "off" ? p.off() : p.on();
                    break;
                case "PLAYING":
                    n.onplay == "off" ? p.off() : p.on();
                    break;
                case "PAUSED":
                    n.onpause == "off" ? p.off() : p.on()
            }
        }
        var y, p, u = this,
            g = {
                backgroundcolor: "000000",
                dockicon: !0,
                opacity: 1,
                time: 800,
                onidle: "on",
                onplay: "off",
                onpause: "on",
                oncomplete: "on",
                parentid: null
            };
        t.onReady(a), this.getDisplayElement = function() {
            return i
        }, this.resize = function() {}
    }

    function o(e, t, o, n) {
        function i(e) {
            l.element.style.opacity = "" + e, l.element.style.filter = "alpha(opacity=" + Math.round(e * 100) + ")", l.opacity = e
        }
        this.element = e, this.time = t || 1e3, this.dark = o || .8, this.opacity = 0;
        var a, l = this,
            s = "opacity" in this.element.style;
        s || (this.element.style.zoom = 1), this.off = function() {
            typeof n == "function" && n(), l.element.style.display = "block", clearInterval(a);
            var e = (new Date).getTime(),
                t = l.opacity;
            a = setInterval(function() {
                var o = ((new Date).getTime() - e) / l.time;
                1 > o || (o = 1, clearInterval(a)), i(l.dark * o + t * (1 - o))
            }, 1e3 / 60)
        }, this.on = function() {
            clearInterval(a);
            var e = (new Date).getTime(),
                t = l.opacity;
            a = setInterval(function() {
                var o = ((new Date).getTime() - e) / l.time;
                1 > o || (o = 1, clearInterval(a), l.element.style.display = "none"), i(0 * o + t * (1 - o))
            }, 1e3 / 60)
        }, this.toggle = function() {
            .5 > l.opacity ? l.off() : l.on()
        }
    }
    for (var n = document.getElementsByTagName("head")[0].getElementsByTagName("script"), i = 0; n.length > i; i++) {
        var a = n[i].src.match(/(.*?)BSlightsout-?\d?\.js/);
        if (a) {
            var l = a[1];
            break
        }
    }
    e().registerPlugin("BSlightsout", "6.0", t)
})(jwplayer)

正如我之前告诉你的那样，当我在页面中加载jwplayer代码时，它正在工作并关闭灯光，但是在同一页面中我用iframe代码调用jwplayer，它在iframe内部关闭并且在我的页面中没有任何影响。

无论如何通过iframe代码使用外部jwplayer关闭灯光吗？

plugins: { 'jwplayer/plugins/BSlightsout.js': {}, },

Answer 1

您不需要使用那个臃肿的插件。此笔具有实现所需效果所需的所有代码。

function turnOutLights() {
    $('.lights-overlay').css('background', 'rgba(1, 1, 1, 1)');
    $('.lights-overlay').css({ opacity: 0.9 });
    $('.lights-overlay').css('visibility', 'visible');
    $('#previewPlayer').addClass('zout');
}

function hideOverlay() {
    $('.lights-overlay').css({ opacity: 0.6 });
    $('.lights-overlay').css('visibility', 'hidden');
    $('#previewPlayer').removeClass('zout');
}

jwplayer("previewPlayer").setup({
  playlist: [{
    file: "http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4"
    }],
        width: 720,
        aspectratio: '16:9',
        autostart: true
      });

http://codepen.io/simsketch/pen/eBwqmV

Jwplayer 7灯光和iframe

1 个答案: