2016-02-24 52 views
0

我有一個基於BootStrap崩潰組件的手風琴。所有工作都很好,但我的下一個任務是在面板打開時加載相關視頻。由於頁面上可能有超過10個視頻,我不希望它們在頁面加載時全部加載。目前,我有preload =「無」,所以沒有加載。目前,當用戶點擊控制面板上的播放時,視頻開始加載,並且當面板打開時我正在開始下載。當點擊事件發生時,堆疊視頻/音頻下載

這裏呈現的HTML的一個例子面板

<div class="panel panel-default even"> 
 
    <div class="panel-heading"> 
 
    <h4 class="panel-title"> 
 
     <a href="#accordionPanel1" class="panel-title-link accordionPanel1" data-toggle="collapse" data-parent="#PresentationAccordion" aria-expanded="true"><span class="count">1.</span><span class="title">Webinar One</span></a> 
 
    </h4> 
 
    </div> 
 
    <div id="accordionPanel1" class="panel-collaspe collapse in" role="tabpanel" aria-labeledby="panel1" aria-expanded="true"> 
 
    <div class="panel-body"> 
 
     <div class="row"> 
 
     
 
      <div class="col-xs-12 col-md-4 col-md-push-8 synopsis"> 
 
      <section class="webinarSynopsis"> 
 
       <h1>Webinar One</h1> 
 
       <p>This is a Webinar synopsis.</p> 
 
       <p>Wednesday, February 24, 2016</p> 
 
       <p><a href="/Resources/Files/CY2015-Sales-Force-Activity-Report-With-French-(2).aspx" target="_blank">Webinar One</a></p> 
 
      </section> 
 
      </div> 
 
      <div class="col-xs-12 col-md-8 col-md-pull-4 video"> 
 
      <video controls="" preload="none" class="accordionPanel1 video1"> 
 
       <source src="/getmedia/41ea7d1c-f8b3-4977-aec8-3b195640fd57/2012_kick-off.mp4.aspx?width=300&amp;height=200&amp;ext=.mp4" type="video/mp4"> 
 
      </video> 
 
      </div> 
 
     
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

回答

0

你想是這樣的:

$('#myCollapsible').on('shown.bs.collapse', function() { 
    //load video 
}) 

這個函數會等到崩潰盡顯並且對用戶可見。