Question

我遇到了JWP7的问题，当播放器在纵向或横向模式下加载时，它会按预期延伸到整个窗口，但在播放器仍在播放时更改设备方向时，播放器不会＃39;缩放新窗口尺寸。

代码示例：

$('.player').height($window.height()); 

jwplayer("myElement").setup({
   file: "somevideo.mp4",
   width: windows.width,
   height: windows.height,
});

<div id="player">
  <div class="close_btn fadeIn"><img src="/img/close.png" width="50" /> </div>
  <div id='player_frame'>
   <iframe id=""video_iframe></iframe>
  </div>
</div>


@media screen and (orientation:portrait) {
 .video_iframe
 {
  height: 100vh;
  overflow: hidden;
  width: 100vw;
  }
}

@media screen and (orientation:landscape) {
 .video_iframe
 {
  height: 100vh;
  width: 100vw;
  }
 }

有什么建议吗？

提前谢谢大家。

Answer 1

您的代码似乎存在一些问题：

1）iframe ID属性未正确括在引号中：

<iframe id=""video_iframe></iframe>

应该是：

<iframe id="video_iframe"></iframe>

2）您的CSS选择器使用类符号而不是元素ID进行定位：

.video_iframe
{
    height: 100vh;
    overflow: hidden;
    width: 100vw;
}

应该是：

#video_iframe
{
    height: 100vh;
    overflow: hidden;
    width: 100vw;
}

3）“播放器”包装器可能会限制生成的视频播放器的高度，因为以下只运行一次，并且可能设置了一个明确的像素值：

$('#player').height($window.height());

尝试删除此行。

Answer 2

我设法用jQuery移动定向更改事件修复它：

    $(window).bind( 'orientationchange', function(e){
            var windowHeight = $(window).height() + 'px';
            var windowWidth = $(window).width() + 'px';

            if(window.orientation == 0) // Portrait
            {
                $("#myElement").height(windowHeight);
                $("#myElement").width(windowWidth);
            }
            else // Landscape
            {
                $("#myElement").height(windowHeight);
                $("#myElement").width(windowWidth);
            }
});

方向更改时调整jwplayer7 iframe的大小

2 个答案: