有沒有使用jQuery Mobile動態調整視頻/圖像大小的方法？

這一個很困擾我很長一段時間，但我仍然無法找到解決方案。有沒有使用jQuery Mobile動態調整視頻/圖像大小的方法？

有誰知道如何動態調整視頻的尺寸（嵌入從YouTube/VIMEO等）和圖像在網站的移動版本，用jQuery Mobile開發。

我的情景是，網站的移動版本從主網站提取相同數據庫/表格的內容，其中圖像和視頻比手持設備應該大得多。有小費嗎？

2013-01-18 Spencer Mark

要做到真正的調整大小（不結垢）你需要一個服務器端解決方案。 –

圖像不是很大，因爲它們在頁面的內容之內，所以創建相同內容的兩個副本是相當不必要的，只是爲了在移動設備上顯示與較小圖像不同的變體 - 特別是移動設備具有不同的尺寸，你可以水平或垂直預覽頁面，這也應該調整圖像的大小。 –

不要混合圖像和視頻調整大小的問題。建議在服務器端（PHP/Python，C＃等）調整圖像大小以適應更小的流量和更快的加載移動網站。如果視頻來自外部託管（如youtube），則可以在服務器端使用FFMpeg調整大小，然後以最低的質量開始播放。

來源

2013-01-18 13:55:47 moddom

FFMpeg處理youtube/vimeo/blip等 - 嵌入代碼？ –

我建議您不要轉換視頻託管視頻，因爲您的網站流量很大。如果這不是問題，那麼請嘗試瞭解ffserver（FFMpeg的一部分）。 – moddom

我寫了這個功能：

/** 
* 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-18 15:58:37

有沒有使用jQuery Mobile動態調整視頻/圖像大小的方法？

回答

相關問題