3

HTML5 ビデオには固有の縦横比があり、CSS が何をするように指示しても、それを維持する傾向があります。

16:9 ではないレスポンシブ ビデオ コンテナーがあり、元の縦横比が崩れても、その中のビデオを幅 100%、高さ 100% に拡大したいと考えています。

私の問題を解決する CSS object-fit: fill プロパティについて読みましたが、最新のブラウザーがそれをサポートするまでにはまだ長い道のりがあります。したがって、必要なことを達成するには JavaScript に頼る必要があると思います。

私はこのフィドルに出くわしました:

http://jsfiddle.net/MxxAv/

function scaleToFill(videoTag) {
 var $video = $(videoTag),
    videoRatio = videoTag.videoWidth / videoTag.videoHeight,
    tagRatio = $video.width() / $video.height();
 if (videoRatio < tagRatio) {
        $video.css('-webkit-transform','scaleX(' + tagRatio / videoRatio  + ')')
 } else if (tagRatio < videoRatio) {
        $video.css('-webkit-transform','scaleY(' + videoRatio / tagRatio  + ')')
 }
}

$(function () {
 $("#testVideo").click(function(evt) {
    scaleToFill(document.getElementsByTagName("video")[0]);
 });
});

ただし、このコードを機能させることができないようです。コンソールに、videoWidth プロパティを読み取れないことが表示されます。

4

1 に答える 1

3

<video>タグの HTML5 仕様からの引用:

ビデオ コンテンツは、要素の再生領域内にレンダリングする必要があります。これにより、ビデオ コンテンツの縦横比が保持された状態で、再生領域内に完全に収まる最大サイズで再生領域の中央に表示されます。したがって、再生領域のアスペクト比がビデオのアスペクト比と一致しない場合、ビデオはレターボックスまたはピラーボックスで表示されます。ビデオを含まない要素の再生領域の領域は、何も表していません。

特に videoWidth に関しては、すべての主要なブラウザでサポートされているようですので、何が問題なのかわかりません。

私の知る限りでは、リンクした jsfiddle に示されている CSS 変換は、<video>. ただし、Chrome 以外のブラウザで jsfiddle を使用しようとした場合はどうでしょうか。あなたが提供したスクリプトは webkit 変換を追加するだけなので、他のレンダラーで変換を行うように変更し、効果をより明確にするために比率を増やしました。

この新しいものを見てください。うまくいけば、それはあなたが望んでいたものです。さらに、これは純粋な CSS のものです。何らかの理由で新しい比率を計算する必要があり、静的にすることができない場合を除き、これらの変更を行うために JavaScript は実際には必要ありません。唯一の問題は、コントロールが見えなくなることです。そのため、autoplay 属性を追加しました。

于 2013-11-09T09:02:48.057 に答える