6

コンテンツの大部分が動画であるクライアントのウェブサイトを構築しています。HTML5 ビデオ要素を使用してコンテンツを表示していますが、iOS の Safari に関しては問題があります。

iOS の Safari は、ユーザーがダウンロードを開始するまでビデオ メタデータをダウンロードしないため、ビデオの幅と高さのプロパティはデフォルト サイズの 300 x 150 ピクセルに設定され、ビデオの両側に大きな黒い領域が伸びて残ります。私の包含要素の幅。

ウェブサイトをできるだけレスポンシブにしようとしているので、このデフォルトのサイズではうまくいきません。iOSのSafariがビデオサイズを尊重するように、これに対抗する方法はありますか?

4

5 に答える 5

-1

width:100%, height:0, padding-bottom:56.25%(16:9 ビデオの場合) を使用して、コンテナ要素のサイズを設定してみてください

次に、コンテナーを取得して、ビデオ要素height/widthを設定します。height/width

var the_case_study_video_wrapper = $('#tw-case-study-hero-video-wrapper'),
    the_case_study_video = document.getElementById('tw-case-study-hero-video'),
    the_height = $(the_case_study_video_wrapper).css('padding-bottom'),
    the_width = $(the_case_study_video_wrapper).css('width');

$(the_case_study_video).css({
   'height': the_height,
   'width': the_width
});

そして、向きのサイズ変更やブラウザのサイズ変更でcssを再度設定するかもしれません...

于 2013-05-20T23:23:34.843 に答える
-3

ビデオタグのCSSルールで固定幅と高さを設定するだけで、サファリはビデオを適切に表示します。

于 2013-08-25T23:42:15.523 に答える