Question

这是我的第一个问题。我在使用Firefox SDK中的Panel API创建的面板中嵌入了YouTube视频（HTML5）。问题是视频不会全屏显示。它尝试，但在面板内恢复到正常大小。我也尝试将方法described here与随机div一起使用，但同样的事情发生了。那么，这是api的限制还是有什么方法可以让它工作？感谢。

Answer 1

我刚开始尝试使用Firefox sdk浮动YouTube播放器插件并遇到同样的问题。我确实找到了一些你可能觉得适合使用的草率工作。

此方法使面板调整为全屏。但是，在调整大小时，即使border属性设置为0，面板仍会显示一些边框。

在主文档中，＆＃34; index.js＆＃34;

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); }

全屏内置firefox-sdk面板

1 个答案: