这个问题困扰了我很长时间,但我仍然找不到解决方案。
有谁知道如何在使用 jQuery Mobile 开发的移动版网站中动态调整视频(从 youtube/vimeo 等嵌入)和图像的尺寸。
我的场景是网站的移动版本从与主网站相同的数据库/表中提取内容,其中图像和视频比手持设备应该大得多。有小费吗?
不要混合图像和视频调整大小问题。建议在服务器端(PHP/Python、C# 等)调整图像大小,以减少流量和更快地加载移动网站。视频可以在服务器端使用 FFMpeg 调整大小,如果视频来自外部托管(如 youtube),则以最低质量开始播放。
我写了这个函数:
/**
* 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