Szorowanie wideo HTML5

Question

Szukałem rozwiązania, w którym można "szorować" wideo HTML5. Jeszcze nie znalazłem i miałem zacząć pisać własne. Ale zanim to zrobiłem, pomyślałem, że byłoby sensowne, aby uruchomić go po raz pierwszy.

Zanim przejdziemy do mojego podejścia, patrz poniżej:

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

Ta strona oczywiście jest zbudowany w technologii Flash, ale służy jako przykład tego, co chciałbym osiągnąć przy użyciu HTML5.

Eksperymentowałem z atrybutem playbackRate (-1) na tagu wideo bez powodzenia. Podejrzewam, że tak jest, ponieważ kodowanie (ogg, mp4, vp8) lepiej nadaje się do odtwarzania w przód.

z tym, widzę dwa możliwe podejścia:

1. tworzą dwa filmy, jeden dla gry do przodu, do tyłu, a drugi do zabawy. to oczywiście podwaja rozmiar każdego filmu, który nie jest idealny.

2. Podziel wideo na poszczególne klatki JPG i zamień obrazy. Oznaczałoby to, że nie mam dźwięku, ale w moim konkretnym przypadku nie stanowi to problemu.

Uważam, że druga opcja jest najlepiej dopasowana do mojej konkretnej aplikacji i pozwala na pewną elastyczność w odtwarzaniu. Co myślisz?

Answer 1

myślę co chcesz można zrobić z popcornjs, dostępny na popcornjs.org

Answer 2

wygenerować kilka miniatury wideo w dowolny sposób. Gdy masz już wszystkie kciuki z filmu, możesz użyć czegoś podobnego do tego, które wykrywa ruch myszy i zastępuje miniaturkę na podstawie ruchu - przesuwanie kursora.

Przykład 1: http://codepen.io/simsketch/pen/gwJBRg

Przykład 2: http://jsfiddle.net/simsketch/x4ko1x1w/

lub czegoś mniej opisowym, jeśli chcesz poziomo złączyć wszystkie miniatury w ikonki, można użyć tego, kolejny piękny przykład najedź na pętlę.

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

ale trzeba by powiązać zdarzenie mousedown zamiast mousemove

to tak naprawdę nie daje pożądanego efektu, więc trzeba by połączyć mousedown i mousemove jak sugeruje się tutaj: https://stackoverflow.com/a/1572688/1579789

to da ci efekt, którego szukasz, ale bez użycia wideo HTML5 i bez dźwięku.

Jednak można również dodać dźwięk, jeśli wiąże ruch myszy z kodem czasowym w ścieżce audio. w tym momencie prawdopodobnie mógłbyś równie łatwo manipulować ścieżką wideo.