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（）方法添加到close事件来解决原始问题中的第二个问题，如下所示：

 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();
    }}
  }})
}};

但是，当你第一次点击链接打开对话框时，我仍然遇到问题，对话框窗口是空白的，直到你实际点击它，然后视频显示并播放正常。有没有人对这个问题有任何想法？

Answer 2

您可能有兴趣使用它。

脚本：

https://github.com/emaxsaun/jwbox

演示：

http://www.pluginsbyethan.com/github/jwbox.html

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

2 个答案: