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