스크롤 (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 스틸로 변환하는 것이 가능한 옵션입니다 (소니는 적어도 하나의 웹 프레젠테이션에서 스크롤을 사용하여이를 수행했습니다). 물론 로딩 전략 (미리로드/버퍼링)에 좀 더주의를 기울여야하므로로드 할 모든 프레임을 기다리는 대신 가능한 빨리 표시 할 수 있습니다.