HTML5ビデオプリロードソリューション

私はいくつかのアニメーションを含むウェブサイトを作成しています。それらの1つはロゴアニメーションです。それは 'lbv.mp4'と呼ばれています。重量があるので、自動再生の遅れがあるので、完全に読み込まれたときにコンテンツを表示することに決めました。HTML5ビデオプリロードソリューション

計画は次のとおりです。

ビデオは、ビデオの長さのためにアニメーション
setTimeoutをトリガするためにページ要素にクラスを追加し、ビデオ
を開始
ロード

visibility: hidden

これは、次のコードで説明した方がよい：

video.addEventListener('loadeddata', function() { 
    if (video.readyState === 4) { 
     video.play(); 
     $('#page').addClass('transition'); 
     document.setTimeout(function(){ 
      video.attr('style', 'visibility: hidden'); 
     }, 750); 
    }

唯一の問題は、私はそれが純粋なJSと、どちらもjQueryを使ってどちらも働いて得ることができないということです。ビデオが読み込まれていない、クラスは与えられていません。 Safari、Chrome、Firefoxでテスト済み。

最終的な質問は、「それを簡単にする方法やソリューションを修正する方法はありますか？

出典

2016-09-21 MaxelRus

私はあなたがやろうとしているのか理解していません。あなたのビデオが完全にロードされたら、あなたはそれを隠しますか？ – codename44

@ codename44私のビデオがロードされた後、0.75秒遅れて再生され、隠されます。 – MaxelRus

イベントloadeddata手段：

メディアの最初のフレームが終了したローディング。

readyState === 4は意味：

十分なデータが利用可能-とされ、ダウンロード率は、メディアが中断することなく最後まで再生することができることを十分に高です。

あなたはloadeddataがトリガーしかしreadyStateが4ではないされていることのチャンスを持っています。 loadeddataが1回だけトリガーされるため、動画は再生されません。

ログを追加して、この前提を確認してください。

私は何をしようとすると、以下の通りです：autoplay

と

使用<video>それを隠すために、ビデオにendedイベントをリッスンし、遷移
を開始するには、ビデオにplayingイベントをリッスンします

属性、イベントおよびreadyStateの参照：

出典

2016-09-21 14:11:37 codename44

HTML5ビデオプリロードソリューション

答えて

関連する問題