jPlayer + 自定义控件 + 相对父级 = 没有全屏？答案

【问题标题】：jPlayer + custom controls + relative parent = no fullscreen?jPlayer + 自定义控件 + 相对父级 = 没有全屏？
【发布时间】：2011-11-18 12:44:00
【问题描述】：

我在页面上有一个 jPlayer 视频组件。我已经为它编写了自定义控件，因为它们需要大量样式。我希望全屏按钮扩展视频以覆盖除标题之外的整个视口。问题是视频位于相对定位的 div 内，所以当我将其位置设置为 top、left 和 absolute 时，它只会填满这个 div。

结构：

<div id="header"></div><!--This should be visible, even in fullscreen-->
<div id="wrapper"><!--I want the video to fill this wrapper when fullscreen is toggled-->
    <div id="internalContainer"> <!--This is relatively positioned and smaller than the wrapper-->
        <video/><!--This is the video I want to expand-->
    </div>
</div>

我目前正在使用两个视频播放器，它们“同步”并在一个中单击全屏触发另一个，但它并不优雅，需要几个 hack 才能工作。

有什么好的方法吗？我无法分离和重新连接视频节点，因为这会在 jPlayer 使用 Flash 后备时破坏它。

【问题讨论】：

标签： javascript css video jplayer

【解决方案1】：

Thomas 你可能迟到了，但这是我在类似情况下所做的工作。分两步。

第 1 步：设置位置：固定在 .jp-video-full 类上。

.jp-video-full { position: fixed; top: 0px; left: 0px; }

第 2 步：向 jplayer 构造函数添加一个 resize 事件，将宽度设置为浏览器窗口宽度，并在从全屏恢复时返回。

$("#jquery_jplayer_1").jPlayer({
    resize: function(){
        if ($("#jp_container_1").is('.jp-video-full')) {
            $('div.jp-video-full').width($(window).width());
        } else {
            $('div.jp-video-360p').width(670);
        }
    }
});

【讨论】：