0

これは長い間私を悩ませていましたが、それでも解決策が見つかりません。

jQuery Mobileで開発されたモバイルバージョンのWebサイトで、ビデオ（たとえばyoutube / vimeoなどから埋め込まれたもの）と画像のサイズを動的に変更する方法を知っている人はいますか。

私のシナリオは、Web サイトのモバイル バージョンが、メインの Web サイトと同じデータベース/テーブルからコンテンツを取得するというものです。メインの Web サイトでは、画像とビデオがハンドヘルド デバイス用よりもはるかに大きくなっています。任意のヒント？

4

2 に答える 2

0

画像とビデオのサイズ変更の問題を混在させないでください。画像のサイズ変更は、サーバー側 (PHP/Python、C# など) で行うことをお勧めします。これにより、トラフィックを減らし、モバイル サイトの読み込みを高速化できます。ビデオは、サーバー側で FFMpeg を使用してサイズ変更できます。外部ホスティング (YouTube など) からのビデオの場合は、最低品質で再生を開始します。

于 2013-01-18T13:55:47.340 に答える
0

私はこの関数を書きました：

/**
 * resize_embedded resizes embedded videos like youtube videos;
 * Examples: 
 *  - resize_embedded($('youtube_div'), 300, 200);
 *  - Fiddle: http://jsfiddle.net/xjxVC/1
 *
 * Parameters:
 * @param jquery the element that contains the embedded media
 * @param number the new width
 * @param number the new height
 *
 */
function resize_embedded(){

    // Did we receive 3 correct parameters
    if(arguments.length === 3 && $(arguments[0]).length && isNumber(arguments[1]) && isNumber(arguments[2])) 
        ;
    else
        return 0;

    // Clone embedded element
    $c = $(arguments[0]).clone();

    // Resize clone (replace width/height of all children who have them) 
    $c
        .attr('width', arguments[1])
        .attr('height', arguments[2])
        .children().each(function(){     
            $(this).attr('width') && $(this).attr('width', arguments[1]);
            $(this).attr('height') && $(this).attr('height', arguments[2]);
    })

    // Replace target with clone
    $(arguments[0]).replaceWith($c);
}

function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}

デモ: http://jsfiddle.net/xjxVC/1

于 2013-01-18T15:58:37.757 に答える