1

window.onload を使用して関数を呼び出しています。これは、ビデオの style.height と style.width をウィンドウ内で可能な最大値に設定します (アスペクト比を維持しながら)。これが onload イベントで呼び出されると、ビデオの左右に黒いバーが表示されます。これは、ブラウザーのサイズが変更されたときに残り、それ以降はビデオ (またはそのコンテナー) の一部のように見えます。

「resizevid」関数を onload から外して、onresize でのみ呼び出すと、黒いバーが表示されません。

これを修正する方法についてのアイデアはありますか? ビデオの幅の解釈方法を変更する onload イベントの後に何が起こりますか? 教えていただけるとありがたいです！

フルページの URL: onload で resizevid を 使用: http://thebeach.name/video.html onresize でのみ resizevid を使用: http://thebeach.name/videores.html

コードの抜粋: スタイル:

<style>
html, body, div, video{border:0px;margin:0px;padding:0px;background-color:black;vertical-align:top;text-align:center;}
video{width:100%}
</style>

html:

<body onresize="resizevid();" align=center>
<video align=center id="myvideo" autoplay loop>
</video>
</body>

脚本：

window.onload = function() {
changevid();
resizevid();
}

function resizevid(){

//find out the viewport size

var viewportwidth;
var viewportheight;

if (typeof window.innerWidth != 'undefined'){
    viewportwidth = window.innerWidth,
    viewportheight = window.innerHeight
}

 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0)
{
    viewportwidth = document.documentElement.clientWidth,
    viewportheight = document.documentElement.clientHeight
}

// older versions of IE

else
{
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
}


//get the aspect ratio of the video

var vidwidth = document.getElementById('myvideo').offsetWidth;
var vidheight = document.getElementById('myvideo').offsetHeight;
var aspratio = vidheight/vidwidth;

//set video to full height, find correct width
function vidTooTall(){
    d=document.getElementById('myvideo');
    var newheight = viewportheight+'px';
    var newwidth = viewportheight/aspratio;
    newwidth = newwidth+'px';
    d.style.height = newheight;
    d.style.width = newwidth;
}

//set video to full width, find correct height
function vidTooWide(){
    d=document.getElementById('myvideo');
    var newwidth = viewportwidth+'px';
    var newheight = aspratio*viewportwidth;
    newheight = newheight+'px';
    d.style.height = newheight;
    d.style.width = newwidth;
}
//if windowheight/windowwidth < vidheight/vidwidth
//video is too tall, else video is too wide

if(viewportwidth*aspratio>viewportheight){
        vidTooTall();
    }
else{
        vidTooWide();
}

}
4

0 に答える 0