在 firefox-sdk 面板内全屏

Question

这是我的第一个问题。我在使用 Panel API from Firefox SDK. The problem is that the video won't go fullscreen. It tries to, but goes back to normal size within the panel. I've also tried to use the method described here 和随机 div 创建的面板中嵌入了一个 youtube 视频 (HTML5)，但同样的事情发生了。那么，这是 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 和创建自定义控件来解决。定位视频时，也很难使用多显示器支持。

编辑：

这是做同样事情的另一种方法，但这种方法似乎处理多显示器支持。它将位于 window firefox 当前打开的任何内容的左上角。

在 index.js 文件中

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

在 firefox-sdk 面板内全屏

Fullscreen inside firefox-sdk panel

firefox

sdk

panel

fullscreen