2

サーバーから動的に構築されたhtmlテーブルを取得しました。最終的には、次のようなテーブルが表示されます。

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

誰かがテーブルの行をクリックすると、DoNav関数を呼び出してビデオを挿入します。

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つの行をクリックすると、非常に効果的です。ただし、次の行をクリックすると、その下に別のプレーヤーが追加されます。そこにあるプレーヤーを、クリックしたばかりの新しいプレーヤーに置き換えたいです。$("#myfileplayer").hide();関数の最後に追加しようとしましたDoNavが、それはプレーヤー全体を非表示にするだけです。何か案は？

4

2 に答える 2

1

これは簡単です。DoNav関数で置き換えます

mydiv.append(myvideo);

と：

mydiv.html(myvideo);

これは、単に新しいビデオをdivに追加するのではなく、ビデオdivのコンテンツ（古いビデオ）を置き換えることを意味します。

于 2012-05-07T01:07:42.097 に答える
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();
    });

}
于 2012-05-07T01:08:15.903 に答える