HTML5 비디오 스크러빙

Question

저는 HTML5 비디오를 통해 "제거"할 수있는 솔루션을 찾고있었습니다. 나는 아직 하나를 발견하지 못했고 내 자신의 글을 쓰기 시작했다. 그러나 내가 그것을하기 전에, 나는 그것이 과거를 그렇게 먼저 달리는 것이 약간의 의미가 있다고 생각했다. 우리는 내 방식으로 들어가기 전에

이를 참조하십시오

http://www.kokokaka.com/demo/bluebell_ss10/site

물론이 사이트는 플래시 내장하지만 난 HTML5를 사용하여 달성하고자하는 것의 예로서 역할을한다.

나는 비디오 태그의 playbackRate (-1) 속성을 많은 행운없이 실험했습니다. 인코딩 (ogg, mp4, vp8)이 앞으로 재생할 때 더 적합하기 때문에 이것이 의심스러운 부분입니다.

1. 두 개의 비디오, 앞으로 플레이를 작성하고, 이전 버전과 또 다른 재생이와

   , 난 두 가지 접근 방법을 참조하십시오. 이것은 물론 이상적인 비디오의 크기를 두 배로 만듭니다.

2. 동영상을 개별 jpg 프레임으로 분할하고 이미지를 전환합니다. 이것은 소리가 나지 않는다는 것을 의미하지만, 특정 응용 프로그램에서는 이것이 문제가되지 않습니다.

두 번째 옵션이 내 특정 응용 프로그램에 가장 적합하고 재생에 유연성을 허용한다고 생각합니다. 어떻게 생각해?

Answer 1

내가 당신이 어떤 방법으로 비디오의 축소판 무리를 생성 popcornjs.org

Answer 2

에서 popcornjs 사용할 수 수행 할 수 있습니다 원하는 생각합니다. 비디오에서 엄지 손가락을 모두 가져온 다음에는 마우스 움직임을 감지하고 이동 - 호버 스크러빙을 기반으로 미리보기 이미지를 대체하는 이와 유사한 것을 사용할 수 있습니다.

예 1 : http://codepen.io/simsketch/pen/gwJBRg

예 2 : 수평하려는 스프라이트에 모든 썸네일 이미지를 연결할 경우

이하 자세한 뭔가 http://jsfiddle.net/simsketch/x4ko1x1w/이, 당신이의 아름다운 다른 예를 이것을 사용할 수 있습니다 호버 스크럽.

http://jsfiddle.net/simsketch/r6wz0nz6/152/

하지만 당신은 mousemove

여기에 제안 당신이 mousedown 및 mousemove을 결합해야합니다 있도록이 정말 당신이 원하는 효과를주지 않는 대신 mousedown에 이벤트를 바인딩해야합니다 : https://stackoverflow.com/a/1572688/1579789

이렇게하면 HTML5 비디오를 사용하지 않고 사운드없이 원하는 효과를 얻을 수 있습니다.

그러나 마우스 움직임을 내가 생각하는 오디오 트랙의 시간 코드에 바인딩해도 사운드를 추가 할 수 있습니다. 그 시점에서 비디오 트랙을 쉽게 조작 할 수 있습니다.