jquery - 对话框中的 jwplayer - 关闭对话框窗口后播放器不再显示

Question

我有一个用 XQuery 构建的应用程序，它显示嵌入在页面上的视频。我设置了一个链接，单击该链接将打开一个对话框窗口，显示使用 jwplayer 的视频。第一个问题是，当您第一次单击链接打开对话框时，对话框窗口是空白的，直到您实际单击它，然后视频才能正常显示和播放。第二个主要问题是，如果您关闭对话框窗口，然后单击链接重新打开它，则视频根本不会显示 - 即使您单击它，对话框窗口也是完全空白的。

我在 JWPlayer 论坛和 Stackoverflow 上查看过类似的帖子，但找不到答案。 Stackoverflow 中有一个类似的问题，表明这个问题可以在 JWPlayer 版本 6.10 中解决，但我使用的是版本 6.12.4956。如果有人可以看一下并给我一些建议，我将不胜感激。

这是我的代码:

<div id="video-player-container">
 <div id="video-player">{() (: This div is filled by the player :)}</div>
 <div id="video-player-modal">{() (: This div is filled by the player :)}</div>
  <script type='text/javascript'>
    var options = 
     {{
       playlist:
       [{{
        sources: [
         {{ file: '{$video-rtmp-href}' }},
         {{ file: '{$video-hls-href}' }}
       ],
         image: '{$image-href}'
       }}],
      width: '100%',
      height: '90%',
      aspectratio: '16:9',
      primary: "html5",
      stretching: "fill"
     }};   
       
     jwplayer('video-player').setup(options);   
    
     function dialogOpen() {{
      $("#video-player-modal").dialog({{
      resizable: true, 
      width: '65%',
      open: function(event, ui) {{
        jwplayer("video-player-modal").setup(options);
      }}
      }})
    }};
</script>
 <div>
 <a href="javascript:dialogOpen();">
  <img src="/images/video-resize.png"/>
 </a>
 </div>
</div>

Answer 1

我似乎通过将 .remove() 方法添加到关闭事件中解决了我原来问题中的第二个问题，如下所示:

 function dialogOpen() {{
  $("#video-player-modal").dialog({{
    open: function(event, ui) {{
     jwplayer("video-player-modal").setup(options);
    }},
    autoOpen: true,
    resizable: true, 
    close: function(event, ui) {{
      jwplayer("video-player-modal").remove();
    }}
  }})
}};

但是，当您第一次单击链接打开对话框时，我仍然遇到问题，对话框窗口是空白的，直到您实际单击它，然后视频才能正常显示和播放。有人对这个问题有什么想法吗？