ウェブページのビデオ読み込みを最適化する

Question

私は各セクションに複数のビデオタグを含む単一のページアプリケーションを持っています。ウィンドウの高さはセクションの高さです。各タグには、MP4の形式で異なる動画があります。私はページの読み込み時間に影響を与えずにこれらのビデオをすばやく読み込みたいので、jqueryを使用して遅延読み込みを試みました。しかし問題は、ビデオファイルのサイズが5MBであり、ロードに時間がかかることです。他の可能な方法は、ページの読み込みが完了した後、またはユーザーに表示せずにバックグラウンドプロセスとして、ページの読み込みと読み込みに最初のセクションビデオを読み込むことです。

私はシングルページアプリケーションにfullpage jsを使用しています。それは、遅延ロードの未来があり、私はビデオコンテンツをロードするためにそれを使用しています。私が以前言ったように、各ビデオは5Mbのファイルサイズです。ここで私のシングルページアプリケーションで使用されているコードです。事前に

<video> <source data-src="video.mp4" type="video/mp4" /> </video>

感謝。

Answer 1

私はこのようなタスクを、この要素をそれぞれ遅延ロードすることで行います。このためには、jQuery.LazyとAV pluginを使用して、そのようなタグを処理できます。これは実装が非常に簡単です。

代わりにあなたの元videoタグの：

<video data-src="video.mp4|video/mp4"></video> 

または書き込みをする別の方法：

<video> 
    <source data-src="video.mp4" type="video/mp4" /> 
</video> 

あなたはそれを変更

<video> 
    <data-src src="video.mp4" type="video/mp4"></data-src> 
</video> 

その後に2つのスクリプト・ファイルを追加あなたの文書：

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.5/jquery.lazy.min.js"></script> 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.5/plugins/jquery.lazy.av.min.js"></script> 

そして、あなたのページに後でプラグインを初期化します。

<script type="text/javascript"> 
jQuery(function($) { 
    $("video").lazy(); 
}); 
</script> 

ザッツすべて。ユーザーがビューポートに達するとビデオが読み込まれます。あなたは、アニメーションを読み込んでいたり、何か他のものを見せたりすることで、さらに進んでいくことができます。