Полный экран внутри панели firefox-sdk

Question

Вот мой первый вопрос. Я встроил видео youtube (HTML5) в панели, созданной с помощью Panel API из Firefox SDK. Проблема в том, что видео не будет работать в полноэкранном режиме. Он пытается, но возвращается к нормальному размеру внутри панели. Я также попытался использовать метод described here со случайным div, но то же самое происходит. Итак, это ограничение от api или есть ли способ заставить его работать? Благодарю.

Answer 1

Я только что начал экспериментировать с плавающим плагином для проигрывателя YouTube, используя Firefox sdk и столкнувшись с той же проблемой. Я нашел какую-то неряшливую работу, которую вы можете найти подходящей для использования.

Этот метод вызывает изменение размера панели на весь экран. Однако при изменении размера, даже если свойство границы установлено равным 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 по умолчанию не реагируют на мышь, что можно обойти с помощью api YouTube и создания настраиваемых элементов управления. С позиционированием видео также будет сложно работать с несколькими мониторами.

Edit:

Вот еще один способ, который делает то же самое, но это один, как представляется, иметь дело с поддержкой разных мониторов. Он будет располагаться в верхнем левом углу любого окна, в котором сейчас работает firefox.

в index.js файл

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