3

カスタム ビデオ コントロールを作成しましたが、ビデオの再生中にプログレス バーがフルスクリーンで適切に伸びません。そのため、ビデオが最後に到達するまでに、バーは幅の約 1/3 になります。

フルスクリーンの前にバーサイズがコンテナのサイズに等しく設定されていることに関係があると思います。バーのサイズはパーセンテージで設定されているため、ラッパーに合わせて調整されます。JS を使用してプログレス バーを含むバーに合わせて調整する方法がわかりません。(JQueryは使えません)

JS:

 bar = document.getElementById('defaultBar');
        barSize = bar.offsetWidth;
        progress = document.getElementById('progressBar');

function move(e){
    if(!media.paused && !media.ended){
        var mouseX= e.offsetX;
        newTime=((mouseX*media.duration)/barSize);
        media.currentTime=newTime;
        progress.style.width=mouseX+'px';
    }
}

HTML:

<div id="defaultBar">
     <div id="progressBar"></div>
</div>

CSS:

#defaultBar{
position:relative;
float:left;
width:59.5%;
height: 22px;
padding:0px;
border: 0px solid black;
background:yellow;
margin: 0px;
cursor: pointer;
}

#progressBar{
position:relative;
float:left;
height: 50%;
margin: 5px 0px;
border: 0px solid black;
background:green;
cursor: pointer;
}

全画面表示ではなく、進行状況バーがコンテナーのほぼ最後 (黄色) にあることがわかります。 ここに画像の説明を入力

ビデオ内の同じ位置、プログレス バーはコンテナの最後近くにはありません。 ここに画像の説明を入力

4

1 に答える 1

1

これが私がそれを解決した方法です：

更新関数の barSize 変数が含まれているものと等しくなるように宣言し、更新関数を継続的に実行する間隔を設定して、含まれているサイズが変更されたときにプログレス バーのサイズを調整しました (fullscree/exitFullscreen)。setInterval はこの問題を解決する最善の方法ではないかもしれません。なぜなら、それはトレーラー ページ (ビデオ プレーヤーがない場所) の外で実行されるからです。一緒に行きました。ただし、コンソールでは、bar.offsetWidth が定義されていないエラーが継続的に追加されていることがわかりますが、前述のように、パフォーマンスには影響しません。

updateBar=setInterval(update, 50);

function update(){
    barSize = bar.offsetWidth;
    if(!media.ended){
        var size = parseInt((media.currentTime/media.duration)*barSize);
        progress.style.width = size +'px';
    }else{
        progress.style.width='0px';
        playButton.firstChild.src = "images/icons/play.png";
        window.clearInterval(updateBar);
    }
    updateTimeDisplay();
}
于 2013-02-24T19:32:03.797 に答える