jquery-ui - 在 jQuery UI 对话框中使用 video.js 会出现第二个视频和重复播放的问题

Question

上下文

我有一个页面，其中包含一堆指向 jQuery UI 对话框的链接，其中包含 video.js 播放器。

问题

当您第一次单击其中一个链接时，一切都会正常运行。

当您随后多次单击时，就会遇到问题。我通过将所有 id 设置为唯一来解决打开第二个不同视频的问题。

但是，这似乎对再次打开同一个视频没有帮助；所以我什至使这些播放器的 ID 变得唯一(请参阅下面 id 的 <video> 属性，其中包含视频的哈希以及 rand 。

定义的问题

我看到正在发生的情况是，一旦您关闭对话框，浏览器就会继续下载视频源。这意味着后续的对话框打开会创建更多视频下载等。

问题

1. 如何停止下载视频？
2. 有没有比我正在做的更好的重新初始化方法。
3. 是否有更好的方法在有人点击关闭按钮时关闭视频？

代码

jQuery UI 对话框窗口加载了以下 HTML

<video id="<?php echo $viLibraryItem->getHash().rand() ?>" class="video-js vjs-default-skin" width="320" height="240"
       controls="controls" preload="auto" data-setup="{}"
       poster="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>">
    <source src="<?php echo $viLibraryItem->getFullWebPath() ?>" type="video/mp4"></source>
    <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
    <object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
      data="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>">
      <param name="movie" value="<?php echo _compute_public_path('flowplayer-3.2.7.swf', 'swf', 'swf', true)?>" />
      <param name="allowfullscreen" value="true" />
      <param name="flashvars" value='config={"playlist":["<?php echo viLibraryItem::getWebPath() ?>/<?php echo $viLibraryItem->getFilename() ?>", {"url": "<?php echo _compute_public_path($viLibraryItem->getFilename(), viLibraryItem::getWebPath(), 'swf')?>","autoPlay":false,"autoBuffering":true}]}' />
      <!-- Image Fallback. Typically the same as the poster image. -->
      <img src="<?php echo viLibraryItem::getWebPath() .'/'. $viLibraryItem->getVideoFilenamePoster() ?>" width="320" height="240" alt="Poster Image"
        title="No video playback capabilities." />
    </object>
</video>

对话框的 JavaScript

video_play_click_event: function(event) { 
    $.loading(); 
    $('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){ 
      $.loading(); 
      $this = $(this); 
      $this.dialog({ 
        width: 320, 
        height: 400, 
        modal: true, 
        buttons: { 
          Close: function() { 
            $(this).dialog( "destroy" ); 
          }, 
        }, 
        open: function(event, ui) { 
            id = $(this).find('.video-js:first').attr('id'); 
            _V_(id); 
            $(this).css({overflow: 'hidden', padding: '0'}); 
        }, 
        beforeClose: function() { 
            $('.video-js').player().pause(); 
            $('.video-js').remove(); 
        } 
      }); 
    }); 
    return false; 
  }

Answer 1

我不知道这是否是解决这个问题的正确答案；然而，我最终将我的 javascript 更改为如下所示。

secret 是设置 src=""让浏览器停止缓冲。这会在控制台上引发视频错误，我真的不喜欢；但目前它可以工作。

video_play_click_event: function(event) {
    $.loading();
    $('<div title="'+$(this).attr('title')+'">').load($(this).attr('href'), function(responseText, textStatus){
      $.loading();
      $this = $(this);
      $this.dialog({
        width: 320,
        height: 400,
        modal: true,
        buttons: {
          Close: function() {
            $(this).dialog('close');
          },  
        },  
        open: function(event, ui) {
            id = $(this).find('.video-js:first').attr('id');
            _V_(id);
            $(this).css({overflow: 'hidden', padding: '0'});
        },  
        beforeClose: function() {
            $('.video-js').player().pause();
            $('.video-js video').attr('src', '');
            $('.video-js').remove();
        }   
      }); 
    }); 
    return false;
  }