web-dev-qa-db-ja.com

iPad（iOS6）のSafariは、HTML5ビデオをページ幅の100％に拡大縮小しません

次の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にアップグレードすると、この修正は機能しなくなったように思えるので、問題の原因は自動であると思います。誰もが同様の経験をし、修正がありますか？

他の誰かがこの問題を経験していますか？ CSS（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>
html5mobile-safarihtml5-videoresponsive-design
33
thisguyzaphod

@brianchirlsの回答の一部を組み込んで、ここに私がしたことを示します。これは、デスクトップ、Android、およびiOSでこれまでのところ機能しているようです。レスポンシブなパディングトリックを活用してください。パディングトップは、幅のパーセントになります。私のビデオは16：9ですので、ここに私のコードがあります：

#video-container {
 position: relative;
 padding-top: 56.25%;
}

video, object {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
15
emptywalls

IOS6とその親にサイズ変更されていないビデオオブジェクトで同様のシナリオがありました。 CSSを使用して、ビデオを含む親div内のすべての要素をターゲットにすることで解決しました。したがって、この例では、ビデオをdiv（たとえば、class = "DivWithVideo"）で囲み、次のCSSを追加する必要があります。

 .DivWithVideo * {max-width: 100%}
1
uknowit2

これを使用して、必要に応じてマージンを使用してコンテナ内のビデオを中央に設定できます。余分な要素を追加する必要はありません。 iOS 7の特別な修正。注意を払う -webkit-calc必要に応じてプレフィックス

width: 100%;
position: absolute;
top: calc(50% - 10px);
left: 50%;
height: calc(100%);
-webkit-transform: translateY(-50%) translateX(-50%);
0
Sergey Sahakyan

ユーザーがアップロードした動画でも同様のことをしなければなりませんでした。これは、ビデオの解像度がわからないことを意味します。ポートレートモードであってもかまいません。

私の回避策は、メタデータのロード時にjavascriptを使用して高さを設定することでした。ほとんどのブラウザでは、ビデオのサイズは最初から正しく設定されています。 iPadでは、ユーザーが再生ボタンを押すと、ビデオサイズが調整されます。私にとっては、ビデオの大きさを知ったらすぐにビデオを成長させても大丈夫でした。

コード（私の設定では同じページに複数のビデオがある可能性があるため、object.idが使用されます）：

<script type="text/javascript">
    // set height and width to native values
    function naturalSize_{{ object.id }}() {
        var myVideo = document.getElementById('video-{{ object.id }}');
        var ratio = myVideo.videoWidth / myVideo.videoHeight;
        var video_object = $('#video-{{ object.id }}');
        video_object.animate({
            height: (video_object.width() / ratio) + "px"
        }, 1000);
    }

    $(document).ready(function() {
        var myVideo = document.getElementById('video-{{ object.id }}');
        myVideo.addEventListener('loadedmetadata', naturalSize_{{ object.id }}, false);
    })
</script>

誰かがおそらく純粋なCSSで、よりクリーンなソリューションを持っているなら、私はそれを見たいです...

0
Marius