0

我有一个 html 表，其中包含列表中的视频和图像。如果您单击任何行，它会播放视频或在 div 中显示图像。

我还有一个尺寸更改链接，可以在单击时调整视频或图像的尺寸。

<div id="player" style="display:block;width:320px;height:240px;background-image:url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)"></div>
<a id="toggleres" href="#">Change to 640x480</a>
<table id="webcam-table" class="pretty">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Date Created</th>
                    <th>Length</th>
                </tr>
                </thead>
                <tbody>
                    <tr class="videorow" data-url=http://www.extremetech.com/wp-content/uploads/2012/12/Audi-A1.jpg>
                        <td>
                            testimages 
                        </td>
                        <td>
                            13 Jun 2013 22:01:37 
                        </td>
                        <td>
                            1sec    
                        </td>
                    </tr>
                                        <tr class="videorow" data-url=http://metalstate.files.wordpress.com/2013/03/10-mclaren-p1-cars-to-wait-for-jpg_235623.jpg>
                        <td>
                            testimages 
                        </td>
                        <td>
                            13 Jun 2013 22:01:37 
                        </td>
                        <td>
                            1sec    
                        </td>
                    </tr>
    </tbody>
</table>

单击表格中的行时，您可以查看任何图像或播放任何视频。您可以随时通过单击链接更改分辨率（大小）。

    jQuery('#toggleres').click(function(event) { 
        if (jQuery('#toggleres').text() == "Change to 320x240"){
            jQuery(this).html("Change to 640x480");
            jQuery('#player').css({'width':'320px', 'height':'240px', 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'});
        }
        else{
            jQuery(this).html("Change to 320x240");
            jQuery('#player').css({'width':'640px', 'height':'480px', 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'});

        }
    });

jQuery("#webcam-table").on("click", "tr.videorow > td", function(e) {
        var parser = document.createElement('a');
        parser.href = theUrl;
            //the right host, therefore it is an image
        if (parser.hostname == "myhost.com")
        {
            jQuery("#player").css("background", "url('" + theUrl + "')");
        }
        else
        {
            flowplayer("player", "js/flowplayer/flowplayer-3.2.12.swf", {
                clip: {
                    url: theUrl,
                    provider: 'rtmp'
                },
                plugins: {
                    rtmp: {
                        url: "js/flowplayer/flowplayer.rtmp-3.2.10.swf",
                        netConnectionUrl: 'rtmp://'+window.location.host+'/recordings'
                    }
                }
            });
        }
});

这对于没有任何特殊考虑的视频非常有效，因为它在一个播放器中打开，该播放器将调整为 div 大小并继续播放。图像不同。如果您单击图像，然后尝试更改它的大小，它将被重置为原始背景。我意识到这正是代码正在做的事情，但它对视频来说非常棒。

我正在努力弄清楚如何才能使视频和图像都适用。这是一个说明行为的小提琴（至少对于图像）。

请注意，#toggleres 点击事件需要存在。有人应该能够切换背景图像的大小，而无需单击表格中的一行。换句话说，如果没有单击图像或视频，则需要存在主背景占位符图像。

总结预期的行为：

  1. 显示背景图像 (320x240)。有人点击更改分辨率链接，它将扩展到 (640x480) - 这目前正在使用下面的代码
  2. 如果有人单击表格中的一行（可能是视频或图像），它将更改背景图像（无论是 320x240 还是 640x480） - 目前正在使用下面的代码
  3. 如果有人单击表格中的另一行，该图像/视频将更改背景图像 - 这通常有效，但如果您播放视频，则无法单击带有图像的另一行，它不会重置/删除播放器
  4. 只要屏幕上有图像或视频（单击表格行后），您可以单击更改分辨率以使视频或图像变大/变小 - 这不起作用，因为它总是会重置为背景图像（小提琴说明了这一点）
4

1 回答 1

1

看起来您只需要删除, 'background-image': 'url(http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Circle_Red.png)'javascript 中的部分（在它出现的两个地方）。这应该可以解决摘要的第 4 点。虽然不确定第 3 点 - 我需要查看将播放器添加到页面的代码以确定如何删除它。

于 2013-06-16T01:02:35.690 回答