全屏內firefox-sdk面板

Question

這裏是我的第一個問題。我在使用Firefox SDK中的Panel API創建的面板中嵌入了一個YouTube視頻（HTML5）。問題是視頻不會全屏顯示。它試圖在面板內恢復正常大小。我也嘗試使用方法described here隨機div但同樣的事情發生。那麼，這是api的一個限制嗎，還是有什麼方法可以讓它起作用？謝謝。

Answer 1

我剛剛開始嘗試使用Firefox sdk的浮動YouTube播放器插件，並遇到同樣的問題。我確實發現了一些麻煩的工作，你可能會覺得適合使用。

此方法會導致面板調整爲全屏。但是，在調整大小時，即使邊框屬性設置爲0，面板仍會顯示一些邊框。

在主文檔中

，「index.js」

var self = require('sdk/self'); 
var data = require("sdk/self").data; 
let { getActiveView }=require("sdk/view/core"); 

let myPanel = require("sdk/panel").Panel({ 
    contentURL: "./index.htm", 
    contentScriptFile: ["./youtube.js", "./index.js"] 
}); 

var player = getActiveView(myPanel); 
player.setAttribute("noautohide", true); 
player.setAttribute("border", 0); 
player.setAttribute('style', 'background-color:rgba(0,0,0,0);'); 

myPanel.show(); 
init(); 
myPanel.port.on('fullscreen', fullScreen); 

function init(){ 
    var size = 30, 
     width = size * 16, 
     height = size * 9; 
    myPanel.resize(width,height); 
} 
function fullScreen(width, height){ 
    player.moveTo(3840, 0); // Need to moove the video to the top left 
      //of the monitor or else the resize only takes a potion of the screen. 
      //My left position is 3840 because i'm doing this on my right 
      //screen and the left is 4k so i need the offset. 
    myPanel.resize(width,height); 
} 

在我的內容腳本文件

var container = document.getElementById('container'), 
    overlay = document.getElementById('overlay'); 

overlay.addEventListener('click', fullscreen); 

function fullscreen() { 
    var x = window.screen.availWidth, 
     y = window.screen.availHeight; 
    self.port.emit('fullscreen', x, y); 
} 

有些事情我已經嘗試同時注意到的是，在播放YouTube視頻時面板，視頻有延遲的趨勢，但音頻播放良好。將鼠標移動到其他頁面上的元素以及面板本身時，滯後變得更加明顯。運動越快，它變得越明顯。我找到了一個解決方案，通過放置一個覆蓋視頻的div來將鼠標懸停在面板上。問題在於，默認的YouTube控件不會對鼠標作出反應，這可以通過使用YouTube api和創建自定義控件來解決。在定位視頻時，多個顯示器支持也很難使用。

編輯：

這裏的另一種方式做同樣的事情，但是這一次似乎是處理多監視器支持。它將位於firefox當前所在窗口的左上角。

在index.js

文件

function fullScreen(width, height){ 
    myPanel.hide(); 
    myPanel.show({position:{left:0,top:0}}); 
    myPanel.resize(width,height); 
}