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(;至>末,但只是掩盖了整个参与者。任何想法?

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

在你的杜纳职能中,这简单不过了。

mydiv.append(myvideo);

注

mydiv.html(myvideo);

这样做的是,它取代录像带的内容(旧录像),而不是仅仅在录像带上添加新的录像。

友情链接