Question

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);
   $(myvideo).click(function(){
       $mydiv.show();
});
}

I currently get no video if I click on any row. I’m creating this code for iDevices so it is hard for me to get any debugging information. But it doesn’t seem to show any javascript errors. What am I doing wrong?

Answer 1

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).load(); //active this later
       $(this).play();
   });
}