Question

我有一个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大小并继续播放。图像不同。如果单击图像，则尝试更改刚刚重置为原始背景的大小。我意识到这正是代码正在做的事情，但它对视频来说非常棒。

我正在努力弄清楚如何才能使视频和图像都能正常工作。这是一个 fiddle ，用于说明行为（至少对于图片而言）。

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

总结预期的行为：

显示背景图像（320x240）。有人点击了更改分辨率链接，它将扩展为（640x480） - 目前正在使用下面的代码
如果有人点击表格中的某一行（可能是视频或图片），则会更改背景图片（无论是320x240还是640x480） - 目前正在使用以下代码
如果有人点击表格中的另一行，图片/视频会更改背景图片 - 这大部分都有效，但如果您播放视频时无法点击带图片的其他行，则不会重置/移除播放器
如果屏幕上有图像或视频（点击表格行之后），您可以点击更改分辨率以使视频或图像更大/更小 - 这不起作用，因为它将始终重置为背景图像（小提琴说明了这一点）

Answer 1

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

使用jquery css在点击时更改图像大小

1 个答案: