CODEWITHSUNDEEP
jquery
Tom
Tom

Reputation: 2634

jquery hide/overlay video player

I've got a dynamically built html table from the server. Ultimately it gives me a table that looks like:

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

If anyone clicks the row on the table it calls the DoNav function to insert a video.

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

}

It plays great if you click on one row in the table. But once you click on the next row it adds another player underneath and so on. I want to replace the player that is there with the new one that was just clicked. I've tried adding $("#myfileplayer").hide(); to the end of the DoNav function but that just hides the player overall. Any ideas?

Upvotes: 2

Views: 842

Answers (2)

jamesmortensen
jamesmortensen

Reputation: 34038

You are appending a new player underneath the previous one.

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

}

Upvotes: 1

Joshua Kissoon
Joshua Kissoon

Reputation: 3309

this is simple, in your DoNav function, replace

mydiv.append(myvideo);

with:

mydiv.html(myvideo);

What this does is that it replaces the content (the old video) in the video div instead of just adding a new video to the div.

Upvotes: 1

Related Questions