スクロールでビデオをスクラブする（apple.com esque） - ひどくつぶやく

Question

AppleがMacBook、iPhone、最近ではMacBook Pro product pageの最近使用している機能と同様の機能を実装しようとしています。

MBP製品ページをチェックすると、スクロールするときに画面とタッチバーがアニメーション表示されます。それは本質的にビデオです。

これを採用することで、ビデオがぼやけているようです。私の場合は4つのビデオがありますが、1つのビデオに切り分けるとより効果的ですが、まだ100％ではありません。

私は、それがより良く流れるようにここに適用できるどの方法/戦術が好奇妙なのですか？

動画ファイルをブロブとして保存する方が効果的でしょうか？ ビデオをシリーズの画像に変換する方が良いですか？

Demo。

ここに問題のコード：

// select video element 
var vid0 = document.getElementById('v0'); 
var vid1 = document.getElementById('v1'); 
var vid2 = document.getElementById('v2'); 
var vid3 = document.getElementById('v3'); 
var windowheight = $(window).height()-20; 

var scrollpos = window.pageYOffset/400; 
var targetscrollpos = scrollpos; 
var accel = 0; 

// ---- Values you can tweak: ---- 
var accelamount = 0.1; //How fast the video will try to catch up with the target position. 1 = instantaneous, 0 = do nothing. 

// pause video on load 
vid0.pause(); 
vid1.pause(); 
vid2.pause(); 
vid3.pause(); 

window.onscroll = function(){ 
    targetscrollpos = window.pageYOffset/400; 
}; 


setInterval(function(){ 
    scrollpos += (targetscrollpos - scrollpos)*accelamount; 

    //update video playback 
    vid0.currentTime = scrollpos; 
    vid0.pause(); 

    vid1.currentTime = scrollpos; 
    vid1.pause(); 

    vid2.currentTime = scrollpos; 
    vid2.pause(); 

    vid3.currentTime = scrollpos; 
    vid3.pause(); 

}, 40); 

Answer 1

MP4/H.264は、スクラブのための最高の形式ではありません - それは主にストリーミング前向き線形再生のために設計されています。 Appleのページでは、一部のMP4ビデオを使用していますが、ビューではトリガされたリニア再生にのみ使用され、スクラブでは再生されません。

その他のサポートされているビデオ形式（f.ex. OGV、webm）を試してみて、最初のオプションとして<sources>...</sources>セクションの順序で提供して、動画がランダム再生をサポートしているかどうかを確認できます。キャッシング戦略はどのような場合でも遅延とロードに影響します。 Media Source Extensions APIを使用すると、より低レベルでキャッシングをよりよく制御できます。

また、クライアントウィンドウ内の可視部分を使用してビデオを制御して、一時停止または再生をトリガーすることもできます。 This answerを利用することができます。このような場合は、Intersection Observer APIという新しいAPIがあります（poly-fillが存在します）。

スプライトシートおよび/またはJPEGスチルに変換することは実行可能な選択肢です（ソニーは少なくとも1つのウェブプレゼンテーションでスクロールを使用してこれを行いました）。もちろん、ローディング戦略（プリロード/バッファリングと考える）にもっと注意を払う必要があるので、ロードするすべてのフレームを待つのではなく、できるだけ早く表示することが必要です。