0

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

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

有什么好的方法可以做到这一点吗？我无法分离并重新附加视频节点，因为这会在 jPlayer 使用 Flash 后备时破坏它。

4

1 回答 1

2

托马斯可能迟到了，但这是我在类似情况下所做的工作。走了两步。

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

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

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

$("#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);
        }
    }
});
于 2011-11-20T07:36:57.907 回答