Question

我正在为firefox编写一个字幕显示器扩展程序，以便将自定义字幕叠加到没有它们的流式视频上。这是我的第一个扩展。

如何在firefox上叠加一行文字？

如果那不可能，如何创建一个可以打印字幕的窗格？

Answer 1

您可以使用html覆盖视频元素。

但是，如果要覆盖所有内容，则必须创建xul面板。以下是创建面板的方法：

var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var props = {
    type: 'arrow',
    style: 'width:300px;height:100px;'
}
for (var p in props) {
    panel.setAttribute(p, props[p]);
}

win.document.querySelector('#mainPopupSet').appendChild(panel);

panel.addEventListener('popuphiding', function (e) {
    e.preventDefault();
    e.stopPropagation();
    //panel.removeEventListener('popuphiding', arguments.callee, false); //if dont have this then cant do hidepopup after animation as hiding will be prevented
    panel.addEventListener('transitionend', function () {
        //panel.hidePopup(); //just hide it, if want this then comment out line 19 also uncomment line 16
        panel.parentNode.removeChild(panel); //remove it from dom //if want this then comment out line 18
    }, false);
    panel.ownerDocument.getAnonymousNodes(panel)[0].setAttribute('style', 'transform:translate(0,-50px);opacity:0.9;transition: transform 0.2s ease-in, opacity 0.15s ease-in');
}, false);

panel.openPopup(null, 'overlap', 100, 100);

来自：https://gist.github.com/Noitidart/9130024

另见：

https://gist.github.com/Noitidart/9445992

将叠加文本添加到Firefox

1 个答案: