35

次の CSS を使用して、レスポンシブ HTML5 ページでビデオを全幅 (100%) で表示しています。ビデオのネイティブ サイズは 480x270 です。ビデオは、縦横比を維持しながら、すべてのデスクトップ ブラウザーでページの全幅を埋めるようにスケーリングされます。

ただし、iPad (iOS 6.0.1) の Mobile Safari と Chrome では、ページと同じ幅の黒い四角形が表示されます。ビデオは小さく、黒い四角形の中央にネイティブ サイズ (480x270) で表示されます。

video {
    width: 100%;
    max-width: 100%;
    height: auto;
}

http://webdesignerwall.com/tutorials/css-elastic-videosに触発されました。このページには、iOS6 に回帰があると思われるコメントがあります。

iPad を iOS 6 にアップグレードしてから、この修正が機能しなくなったようです。問題の原因は height: auto だと思います。誰もが同様の経験をして、修正していますか?

他の誰かがこの問題を経験していますか? CSSのみを使用して縦横比を維持しながら、iPad（iOS6）でHTML5ビデオを全幅で表示する方法はありますか？

HTML は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<style>
video {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid red;
}
</style>
</head>
<body>
<video preload autoplay controls>
          <source src="file.mp4"  type="video/mp4">
          <source src="file.webm" type="video/webm; codecs=vp8, vorbis">
          <source sr="file.ogv" type="video/ogg; codecs=theora, vorbis">
</video>
4

5 に答える 5

53

ここに2つの問題があります。

  1. Mobile Safariは、ビデオのサイズ（またはアスペクト比）を計算しません。再生を開始するまでビデオファイルヘッダーがまったくダウンロードされないため、要素属性またはCSSで高さと幅を指定する必要があります。このページの3番目のセクションを参照してください。

  2. そうしても、ブラウザは気にしないようです。自動に設定すると、デフォルトの高さ150pxに戻ります。正直なところ、理由がわかりません。おそらくバグです。だが...

...回避策があります。

iOSはキャンバスで同じ問題を抱えているようには見えません。したがって、に設定されているdiv内にキャンバスとビデオを配置できますposition: relative。ビデオと同じようにキャンバスを拡大縮小します。ビデオをに設定しposition: absolute、高さと幅の両方を100％に設定します。そうすれば、キャンバスはdivを希望のサイズに強制し、ビデオはdivを埋めるように拡大します。

ここでの作業サンプル：http：//jsbin.com/ebusok/135/

于 2013-01-11T05:43:37.690 に答える
0

これを使用して、ビデオをコンテナの中央に配置し、必要に応じて余白を設定できます。余分な要素を追加する必要はありません。特にiOS 7の修正。-webkit-calc必要に応じて接頭辞に注意してください

width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);
于 2015-11-05T12:40:57.720 に答える