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();
});

}

如果您单击表格中的一行，效果会很好。但是，一旦您单击下一行，它就会在下面添加另一个玩家，依此类推。我想用刚刚单击的新播放器替换那里的播放器。我尝试添加$("#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 回答