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--> 

にですが見えます：

ページがロードされると、すべてが正常に動作します（最初のビデオは、負荷でした） 。しかし、別のビデオ（画像上）をクリックすると、プレーヤーは不平を言う。もう一度クリックすると、プレーヤーがアペアです。もう1つの問題：すべての画像を2回クリックすると、最初の画像をクリックすると、以前に読み込まれたファイルが再生され、もう一度正しいファイルが再生されます。

これは私の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(); 

として、それを再生