jquery hide/overlayビデオプレーヤー

Question

私はサーバーから動的に構築されたhtmlテーブルを持っています。誰もが、それはビデオを挿入するためにDoNav関数を呼び出して、テーブルの上に行をクリックすると

<div id="player"></div> 

<table id="webcam-table"> 
      <thead> 
      <tr> 
       <th>Camera Name</th> 
       <th>Date Created</th> 
      </tr> 
      </thead> 
      <tbody>    
      <tr > 
       <td onclick="DoNav('http://myserver.com:1935/recordings/myfile1.mp4');"> 
        Default camera 
       </td> 
       <td onclick="DoNav('http://myserver:1935/recordings/myfile1.mp4');"> 
        06 May 2012 07:25:01 
       </td> 
       </tr> 

      <tr > 
       <td onclick="DoNav('http://myserver.com:1935/recordings/myfile2.mp4');"> 
        Default camera 
       </td> 
       <td onclick="DoNav('http://myserver.com:1935/recordings/myfile2.mp4');"> 
        06 May 2012 07:24:47 
       </td> 
       </tr> 
... 
</tbody></table> 

：最終的にそれは私のように見えるテーブルを提供します。

function DoNav(theUrl) 
{ 
var mydiv = $("#player"); 
var myvideo = $("<video id='myfileplayer' src='"+ theUrl +"' width='280' height='200' controls></video>"); 
mydiv.append(myvideo); 
$("#myfileplayer").click(function(){ 
    $(this).play(); 
}); 

} 

テーブル内の1つの行をクリックすると効果的です。しかし、一度次の行をクリックすると、下に別のプレーヤーが追加されます。私はそこにいるプレイヤーをちょうどクリックされた新しいものに置き換えたい。私はDoNav機能の最後に$("#myfileplayer").hide();を追加しようとしましたが、それはプレーヤー全体を隠すだけです。何か案は？

Answer 1

新しいプレイヤーを前のプレイヤーの下に追加しています。

function DoNav(theUrl) 
{ 

    // only add the player if it doesn't yet exist 
    if($('#myfileplayer').length == 0) { 
     var mydiv = $("#player"); 
     var myvideo = $("<video id='myfileplayer' src='"+ theUrl + 
      "' width='280' height='200' controls></video>"); 
     mydiv.append(myvideo); 
    } else { 
     $('#myfileplayer').attr("src",theUrl); 
    } 

    $("#myfileplayer").click(function(){ 
     $(this).play(); 
    }); 

} 

Answer 2

これは簡単です、あなたのDoNav機能で、置き換えると

mydiv.append(myvideo); 

：

mydiv.html(myvideo); 

これが何をするか、それはビデオのdivの代わりに、内のコンテンツ（古いビデオ）を置き換えることですdivに新しい動画を追加するだけです。