najlepszy sposób na tworzenie wideo z animacji html5

Question

Chciałem zrobić krótkie wprowadzenie do podcastu wideo. Będąc głupawym twórcą stron internetowych i nie mającym już dostępu do narzędzi animacyjnych lub wiedzy o nich, pomyślałem, że mogę zrobić dźgnięcie przy wprowadzaniu intro przy użyciu różnych technik html5. Problem polega na tym, jak mogę zamienić to w klip wideo, który łatwo wpadnę do iMovie?

Jeśli muszę, myślę, że można to osiągnąć, jeśli używam tylko płótna, eksportując png każdej klatki używając getImageData. Jedyną wadą jest to, że ograniczam się tylko do płótna. Miałem nadzieję wykorzystać całą gamę nowych technik html5/css3/svg. Nie potrzebuję tej funkcji do ogólnego użytku w sieci, tylko dla siebie, więc byłbym zadowolony z wszystkiego, co wymaga instalacji itp., Aby to działało.

Jeśli muszę, prawdopodobnie mogę użyć narzędzia do przechwytywania ekranu wideo, ale liczyłem na kompletny łańcuch open source.

W końcu, spodziewam się, że stworzę serię pngów i używając ffmpeg, aby je połączyć, miałem nadzieję, że wymyślę świetny sposób na zrobienie tego w automatyczny, otwarty sposób.

Aktualizacja Chciałem tylko wyjaśnić, że to, co zasadniczo próbuję zrobić, to używać HTML5 zamiast czegoś takiego jak flash, ale nie próbuję służyć innym ludziom w internecie, chcę przekonwertować do wideo i nigdy nie musi opuszczać mojego komputera, który w rzeczywistości jest macem, a nie serwerem Linux. Jeśli Flash potrafi to zrobić, dlaczego nie html, prawda? Wydaje się, że ludzie próbują to twierdzić. Problem polega na tym, że mogę wziąć plik SWF i przekonwertować go na standardowe wideo, ale jak to zrobić z animacjami javascript lub CSS3? Oczywiście narzędzie do przechwytywania ekranu może wykonać to zadanie, ale zwykle jest to mała liczba klatek na sekundę i nie może być uruchomione programowo według mojej wiedzy.

Najbliższym rzeczą, o której mogę pomyśleć, to nie narzędzie do zrzutu ekranu, które byłoby czymś w rodzaju webkit2png, ale zamiast pojedynczego png, zajmowałoby to 60 pngs na sekundę. W pewnym momencie mógłbym spróbować dokładnie to zaimplementować, ale chciałem sprawdzić, czy ktoś ma coś dobrego.

Przykład Tak więc właśnie zrobiłem intro, używając wbudowanych kart tytułowych iMovie. This is a good example z grubsza rzeczą, którą chciałbym zrobić. Powinien być całkiem prosty, z niewielką ilością animacji CSS3. To, co mam, nie jest złe, ale chciałbym użyć niestandardowej grafiki z lepszą kontrolą czcionek i układu.

Answer 1

Do tej pory najlepszą rzeczą, jaką znalazłem do tej pory, która nie wymaga napisania kodu c, jest użycie tytanu na pulpicie. Posiada funkcję takeScreenshot dostępną z kodu javascript. Funkcja takeScreenshot pobiera zrzut ekranu całego pulpitu, ale powinno być łatwe zautomatyzowanie przycinania.Z mnóstwem bibliotek animacji javascript, powinienem być w stanie zhakować sposoby uzyskiwania zrzutu ekranu w każdej klatce, nawet jeśli nie może się to zdarzyć w czasie rzeczywistym.

Chociaż nie będę w stanie korzystać z animacji CSS, jest to prawdopodobnie najbardziej elastyczne rozwiązanie, ponieważ wszystko, co mogę zrobić za pomocą animacji CSS, mogę zrobić z javascript, i będę mieć większą kontrolę nad liczbą klatek na sekundę , itp.

Dodatkowo, powinno to pozwolić mi używać wszystkich rzeczy, do których przeglądarka jest zdolna, łącząc html/css/js/svg/canvas.

Answer 2

Co powiesz na nagrywanie ekranu z czymś podobnym do http://danicsoft.com/software/copernicus/?

Answer 3

Well Techsmith Snagit przechwytuje w AVI, lub ich camtasia premii aplikacji (generuje wideo Flash i wyrzutnia strony internetowej) będzie działać. Dlaczego nie po prostu utworzyć slajd Powerpoint z funkcjami, które chcesz dotknąć i użyć zestawu stron HTML rzeczywistych demonstracji, które chcesz zilustrować dogłębnie. Takie podejście stosuję.

Answer 4

Istnieje samouczek z kodem używającym zarówno javascript, jak i PHP do create a video from your canvas animation. Program zapisuje klatka po klatce animacji na płótnie, tak jak w filmie, a następnie można przekonwertować ten stos ramek na format wideo z wybranym kodekiem.

Kod z połączonej strony.

(function() { 
    var canvas = document.getElementById('c'), 
     c = canvas.getContext('2d'), 
     w = canvas.width, h = canvas.height, 
     p = [], clr, n = 200; 

    clr = [ 'red', 'green', 'blue', 'yellow', 'purple' ]; 

    for (var i = 0; i < n; i++) { 
     // generate particle with random initial velocity, radius, and color 
     p.push({ 
      x: w/2, 
      y: h/2, 
      vx: Math.random()*12-6, 
      vy: Math.random()*12-6, 
      r: Math.random()*4+3, 
      clr: Math.floor(Math.random()*clr.length) 
     }); 
    } 

    function frame() { 
     // cover the canvas with 50% opacity (creates fading trails) 
     c.fillStyle = 'rgba(0,0,0,0.5)'; 
     c.fillRect(0, 0, w, h); 

     for (var i = 0; i < n; i++) { 
      // reduce velocity to 99% 
      p[i].vx *= 0.99; 
      p[i].vy *= 0.99; 

      // adjust position by the current velocity 
      p[i].x += p[i].vx; 
      p[i].y += p[i].vy; 

      // detect collisions with the edges 
      if (p[i].x < p[i].r || p[i].x > w-p[i].r) { 
       // reverse velocity (direction) 
       p[i].vx = -p[i].vx; 
       // adjust position again (in case it already passed the edge) 
       p[i].x += p[i].vx; 
      } 
      // see above 
      if (p[i].y < p[i].r || p[i].y > h-p[i].r) { 
       p[i].vy = -p[i].vy; 
       p[i].y += p[i].vy; 
      } 

      // draw the circle at the new postion 
      c.fillStyle = clr[p[i].clr]; // set color 
      c.beginPath(); 
      c.arc(p[i].x, p[i].y, p[i].r, 0, Math.PI*2, false); 
      c.fill(); 
     } 
    } 

    // execute frame() every 30 ms 
    setInterval(frame, 30); 
}()); 

Answer 5

Moim zdaniem najlepszym sposobem na zrobienie tego jest utworzenie obrazów z danych płótna, a następnie skompilowanie wszystkich tych obrazów do pliku wideo za pomocą modułu (na przykład fluent-ffmpeg, który jest pakietem js węzła). To całkiem proste, ale należy uważać na FPS (ilość klatek na sekundę), jeśli tworzysz te obrazy tak szybko, jak to tylko możliwe, możesz zmienić liczbę klatek na sekundę w swoim filmie, na przykład jeśli użyjesz rekursywnie requestAnimationFrame(), uzyskasz 60 klatek na sekundę. Dlatego zamiast czytać wideo HTML5, należy ustawić czas każdego 1/30s (na przykład, jeśli chcesz uzyskać wideo 30 kl./s) i utworzyć obraz z bieżącegoTime do końca wideo. Jeśli masz nie tylko jedno płótno, jeśli zastosujesz animacje na swoim filmie za pomocą wielu płótn, możesz utworzyć nowe puste płótno i narysować na nim wszystkie dane płótna, aby utworzyć tylko jeden obraz zamiast jednego obrazu dla każdego płótna.

Pozdrowienia z Francji

Answer 6

pracowałem na narzędzia, które robi coś podobnego z własnymi wymaganiami. Zasadniczo używa cutycapt (lub dowolnego innego narzędzia do konwersji HTML z CSS na obraz) i wykonuje serię zrzutów ekranu w zależności od wymaganej liczby klatek na sekundę.

Aby to działało, animacje powinny być wyłącznie animacjami CSS, a narzędzie interpoluje własności CSS klatki pośredniej przez analizę składni CSS.

https://github.com/bpsagar/css2video

Nie jestem pewien, czy narzędzie jest kompletne, daj mi znać, jeśli jesteś zainteresowany.