JwPlayer：動態變化的視頻

Question

我有jwPlayer我的網頁上，並在下面的標記：

div class="block_video"> 
    <div class="slider_video" id="slider_video"> 
     <div class="navigation_container"> 
      <div class="navigation"> 
       <ul class="thumbs"> 
        <% foreach (var publicationVideo in Model.PublicationVideos) 
         {%> 
        <li><a id='<%=publicationVideo.PathToVideo %>' data-isurl="<%=publicationVideo.IsUrl %>" href="/assets/images/i/2.jpg" class="thumb" title="<%=Model.Name %>"> 
         <img src="/assets/images/video-content.png" width="49px" height="41px" /> 
        </a> 
         <div class="caption"> 
          <div id="video_player"> 
          </div> 
          <div class="caption_video"> 
           <%=Model.Name %></div> 
         </div> 
        </li> 
        <% } %> 
       </ul> 
       <!-- .thumbs--> 
      </div> 
      <!-- .navigation--> 
     </div> 
     <!-- .navigation_container--> 
     <div class="slideshow"> 
      <div class="render"> 
      </div> 
      <div class="caption-container"> 
      </div> 
     </div> 
     <!-- .slideshow--> 
    </div> 
    <!-- .slider_video--> 
</div> 
<!-- .block_video--> 

它看起來如下：

當頁面加載所有工作正常（第一視頻是負載） 。但是當我點擊另一個視頻（在圖像上），那麼玩家就會消失。如果我再次點擊，那麼玩家是apper。還有一個問題：當我點擊所有圖像兩次，然後當我點擊例如第一個，它播放先前加載的文件，再次單擊播放正確的文件。

這是我的JS：

<script type="text/javascript"> 
    $(document).ready(function() { 
     var isUrlOnReady = $(".block_video a").attr("data-isurl"); 
     var providerOnReady; 
     if (isUrlOnReady === "True") 
      providerOnReady = "youtube"; 
     else 
      providerOnReady = "http"; 

     loadPlayer('<%=Url.Action("GetVideo", "Video", new {videoName = Model.PublicationVideos[0].PathToVideo}) %>', providerOnReady);   


     $(".block_video a").click(function() { 
      var isUrl = $(this).attr("data-isurl"); 
      var fileName = $(this).attr("id"); 
      var provider; 
      var path; 

      if (isUrl === "True") { 
       provider = "youtube"; 
       path = fileName; 
      } 
      else { 
       provider = "http"; 
       path = '<%=Url.Action("GetVideo", "Video", new {videoName = -1}) %>'; 
       path = path.replace("-1", fileName); 
      } 


      loadPlayer(path, provider); 

     }); 
    }); 

// load player 
function loadPlayer(fileName, provider) { 
    jwplayer("video_player").setup({ 
     flashplayer: '<%=Url.Content("~/assets/js/jwplayer/player.swf")%>', 
     file: fileName, 
     height: 173, 
     width: 210, 
     provider: provider, 
     controlbar: 'bottom' 
    }); 
} 
</script> 

Answer 1

爲什麼你想每次都重新初始化播放器？使用其API並提交給播放器媒體文件的URL。簡單的例子：

$(document).ready(function() { 
    jwplayer('player').setup({ 
     flashplayer: 'player.swf', 
     height: 173, 
     autostart: true, 
     width: 210, 
     controlbar: 'bottom' 
    }); 
    $('.media').click(function(){ 
     jwplayer().load($(this).text()); 
    })  
}); 
</script> 
<div id='player'></div><br /> 
<div class='media'>video.mp4</div> 
<div class='media'>video2.mp4</div> 

沒有autostart: true您可以加載媒體和發揮它作爲

jwplayer().load($(this).text()).play();