Jwplayer 7 lightsout et iframe

Question

Je viens d'inclure olugin lightsout dans jwplayer, donc son travail bien quand j'ajoute du code jwplayer dans ma page mais quand j'appelle jwplayer avec un iframe lightsout plugin fonctionne à l'intérieur de l'iframe et n'a aucun effet sur la page plus.

Ci-dessous j'ai le 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) 

comme je vous l'ai dit quand je charge jwplayer code dans la page de ses feux de travail et en éteignant mais quand dans la même page que j'appelle jwplayer avec un code iframe ses feux tournants à l'intérieur de l'iframe et n'a aucun effet sur ma page. Y at-il un moyen d'éteindre les lumières en utilisant jwplayer externe via un code iframe?

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

Answer 1

Vous n'avez pas besoin d'utiliser ce plugin gonflé. Ce stylo a tout le code dont vous avez besoin pour obtenir l'effet désiré.

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