要素のアスペクト比を維持しながら、「フルブリード」または完全なブラウザー エクスペリエンスとして機能させたいと考えています。ビデオは、新しいブラウザ ウィンドウのサイズに合わせて上下する必要がありますが、ブラウザ ウィンドウの中央にも配置する必要があります。時々、一部のビデオが切り取られることがありますが、それは問題ありません。純粋なJSを使用して、ビデオ要素の背景カバーCSSプロパティを再作成しようとしています.それが想像に役立つ場合. それが何かわからない人のために、次のように説明します。
.bkgdCover{
background: no-repeat center center;
-webkit-background-size: 100% 100%;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
以下は、純粋なjavascriptで同じことをしようとする私の試みです:
function getWinSize(){
var wid = 0, hei = 0;
if (document.documentElement && document.documentElement.clientHeight){
wid = parseInt(window.innerWidth,10);
hei = parseInt(window.innerHeight,10);
} else if (document.body){
wid = parseInt(document.body.offsetWidth,10);
hei = parseInt(document.body.offsetHeight,10);
}
return [wid,hei];
}
this.resize2 = function(){
fullBleedVideoPlayer();
};
function fullBleedVideoPlayer() {
var viewport=getWinSize();
var videoRatio = 1080 / 1920;
var browserHeight = viewport[0];
var browserWidth = viewport[1];
var tmp_windowRatio = viewport[1] / viewport[0];
if (videoRatio > tmp_windowRatio) {
tmp_height = Math.round(browserWidth * videoRatio);
_player.style.width= browserWidth+ "px";
_player.style.height= tmp_height+ "px";
_player.style.marginLeft = 0 + 'px';
_player.style.marginTop = -Math.round((tmp_height - browserHeight) / 2) + 'px';
} else {
tmp_width = Math.round(browserHeight * (1 / videoRatio));
_player.style.width= tmp_width+ "px";
_player.style.height= browserHeight+ "px";
_player.style.marginLeft = -Math.round((tmp_width - browserWidth) / 2) + 'px';
_player.style.marginTop = 0 + 'px';
}
}
残念ながら、これは CSS カバーを再現しません。私がどこで間違いを犯したか、または自分で同じことをしたことがある場合は、ぜひご連絡ください。純粋な JS ソリューションのみをお願いします。