jquery点击播放视频

jquery click to play video

本文关键字：视频 播放 jquery      更新时间：2023-09-26

我从服务器那里得到了一个动态构建的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);
   $(myvideo).click(function(){
       $mydiv.show();
});
}

如果我单击任何行，我目前没有视频。 我正在为 iDevices 创建此代码，因此我很难获得任何调试信息。 但它似乎没有显示任何JavaScript错误。 我做错了什么？

看起来您正在用$引用变量 

var mydiv

可以通过mydiv.property而不是$mydiv.property

访问

您应该查看 jQuery on函数，而不是对标记中的每个表列也使用 onclick。

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

而不是$mydiv.append($myvideo);尝试mydiv.append($myvideo);同时将$(myvideo).click更改为myvideo.click和$mydiv.show(); 到mydiv.show();

相关文章：