Jwplayer 7關燈和iframe

Question

我剛剛在jwplayer中包括了關燈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代碼其工作和轉向燈關閉，但如果在同一頁我打電話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