У меня есть универсальная оболочка для видео, которую я пытаюсь адаптировать для мобильных устройств. Что я хотел бы сделать, так это динамически изменять область просмотра, чтобы видео всегда могло поместиться внутри него в любой ориентации. Я предполагал, что это будет просто, но я рву на себе волосы. Переключение ландшафта просто
По сути, высота и ширина видео настраиваются в верхней части страницы, и эта информация передается в JW Player, который соответственно создает флэш- или HTML5-видеоплеер. Я также использую эту информацию в сочетании с шириной и высотой клиента, чтобы попытаться установить область просмотра, чтобы видео часть страницы всегда могла аккуратно вписываться в нее без масштабирования.
У меня есть настройка, которая в значительной степени делает то, что я хочу, на моем Android Galaxy S II, но на iPhone она все еще выглядит беспорядочно. И я должен вручную установить коэффициент масштабирования, который, как я знаю, не помогает мне найти универсальное решение.
Вот суть того, что у меня есть до сих пор:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, height = device-height" id="mvp" />
<script>
/************ Bunch of player config stuff I've omitted *****************/
// These are the width and height of your player. For type "audio", the height is ignored. Default is 480x360.
var width = 480;
var height = 360;
</script>
<script type="text/javascript">
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, resizeView, false);
// see if the height or width of the player is greater than the viewport, if so, resize it
function resizeView() {
if (document.documentElement.clientWidth < width) {
mvp.setAttribute('content', 'width=' + width, + ', height = device-height');
}
if (document.documentElement.clientHeight < height) {
mvp.setAttribute('content','height=' + height + ', initial-scale=0.6666, maximum-scale=0.6666'); // scale hacks to make this at least do what I want on my Droid, doesn't look nice on iPhone
}
};
</script>
</head>
<body>
<h2 id="title">title</h2>
<div id="blurb">blah blah blah</div>
<div role="main">
<div id="mediaspace">
I'll be replaced by the JW Player
</div>
<script src="http://cdn.cengage.com/js/jwplayer/5.8/jwplayer.js" type="text/javascript">
</script>
<script src="player_mobile.js" type="text/javascript">
</script>
<script type="text/javascript">
resizeView();
</script>
</body>
</html>
Может быть, devicePixelRatio будет полезен? Не уверен!
