Question

我从服务器上获得了一个动态构建的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函数的末尾，但这只是隐藏了整个播放器。有什么想法吗？

Answer 1

这很简单，在DoNav函数中，替换

mydiv.append(myvideo);

使用：

mydiv.html(myvideo);

这样做是为了取代视频div中的内容（旧视频），而不是仅仅向div添加新视频。

Answer 2

您正在前一个玩家附加新玩家。

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

}

jquery隐藏/叠加视频播放器

2 个答案: