2

语境

我有一个页面，其中包含一堆指向 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; 
  }
4

2 回答 2

1

I have many videos in a given page and I was facing the same issue. But the below approach worked well for me.

NOTE: Change the MYID for each video in the page. 

jQuery(document).ready(function(){
   jQuery("a#videolink").fancybox({
      frameWidth: 800, 
      frameHeight: 450,
      overlayShow: true,
      overlayOpacity: 0.7
   });
});


<a id="videolink" href="#MYID" title="Test Video">
  <img src="mp4test.jpg" width="248" height="145" />
</a>

<div style="display:none">
      <video id="MYID" poster="mp4test.jpg" class="video-js vjs-default-skin" 
             controls preload="auto" width="300" height="300" data-setup="{}" >
        <source src="mp4test.mp4" type='video/mp4'>
    </video>
</div>
于 2013-02-26T12:47:20.707 回答
1

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

秘密是设置 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;
  }
于 2012-11-27T21:54:44.037 回答