Подтвердить что ты не робот

Лучший способ создать видео из html5 анимации

Я хотел сделать короткое введение для видеоподкаста. Будучи уродливым веб-разработчиком и уже не имея доступа к знаниям или знаниям инструментов анимации, я подумал, что могу нанести удар, выполняя ввод, используя различные методы html5. Проблема в том, как мне превратить это в видеоролик, который я могу легко вставить в iMovie?

Если мне нужно, я думаю, что это может быть выполнено, если я использую только холст, экспортируя png каждый кадр с помощью getImageData. Единственный недостаток в том, что я ограничен только холстом. Я надеялся использовать весь спектр новых методов html5/css3/svg. Мне не нужна эта функциональность, чтобы работать для общего использования в Интернете, только для себя, поэтому я буду рад за все, что требует установки и т.д., Чтобы заставить его работать.

Если мне нужно, я, вероятно, могу использовать инструмент захвата видеоэкрана, но я надеялся на полную цепочку с открытым исходным кодом.

В конце концов, я ожидаю, что я создам серию png и используя ffmpeg, чтобы собрать их вместе, я просто надеялся найти отличный способ сделать это автоматизированным способом с открытым исходным кодом.

Обновить. Я просто хотел уточнить, что то, что я в основном пытаюсь сделать, это использовать HTML5 вместо того, что-то вроде флеш-памяти, но я не пытаюсь подавать его другим людям в Интернете, Я хочу преобразовать его в видео, и ему никогда не нужно покидать мой компьютер, который на самом деле является mac, а не сервером Linux. Если вспышка может это сделать, почему бы не html, правильно? Кажется, это то, что люди пытаются требовать. Проблема в том, что я могу взять SWF и преобразовать его в стандартное видео, но как вы это делаете с анимацией javascript или CSS3? Очевидно, что инструмент захвата экрана может сортировать работу, но обычно это низкая частота кадров и не может быть запущена программно, насколько мне известно.

Ближайшая вещь, о которой я могу думать, это не инструмент для скриншотов, а что-то вроде webkit2png, только вместо одного png потребуется 60 png в секунду. В какой-то момент я мог бы попытаться реализовать именно это, но я хотел посмотреть, есть ли у кого-нибудь что-то хорошее.

Пример Итак, я просто сделал ввод, используя встроенные титульные карточки iMovie. Это хороший пример примерно того, что я хотел бы сделать. На самом деле должно быть довольно просто, с небольшой анимацией CSS3. То, что у меня есть, неплохое, но я бы хотел использовать пользовательскую графику, с лучшим контролем шрифта и макета.

4b9b3361

ОТВЕТЫ

Ответ 1

Пока лучшее, что я нашел до сих пор, что не потребует, чтобы я написал код c, использует Titanium для рабочего стола. Он имеет функцию takeScreenshot, доступную из кода javascript. Функция takeScreenshot получает скриншот всего рабочего стола, но автоматизировать кадрирование должно быть легко. Благодаря множеству javacript-анимационных библиотек, я мог бы взломать способы получения снимков экрана в каждом кадре, даже если это невозможно в режиме реального времени.

Хотя я не смогу использовать анимацию CSS, это, вероятно, самое гибкое решение, так как все, что я могу сделать с анимацией CSS, я могу сделать с javascript, и у меня будет больше контроля за частотой кадров, и др.

Кроме того, это должно позволить мне использовать все, на что способен браузер, объединяя html/css/js/svg/canvas.

Ответ 2

Существует учебник с кодом, использующим как javascript, так и PHP для создать видео из анимации холста. Программа сохраняет кадр за кадром вашей анимации холста, как в фильме, а затем вы можете преобразовать этот стек кадров в определенный видеоформат с помощью кодека по вашему выбору.

Код со связанной страницы.

(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);
}());

Ответ 3

Хорошо Techsmith Snagit захватывает в AVI, или их превосходное приложение camtasia (генерирует Flash-видео и запуск веб-страницы) будет работать. Почему бы просто не создать слайд Powerpoint функций, которые вы хотите затронуть, и использовать HTML-набор страниц фактических демонстраций, которые вы хотите подробно рассказать. Это подход, который я принимаю.

Ответ 4

Вы правы, на мой взгляд, лучший способ сделать это - создать изображения из данных холста, а затем скомпилировать все эти изображения в видео через модуль (fluent-ffmpeg например, который представляет собой пакет node js). Это довольно легко, но будьте осторожны с FPS (частота кадров), если вы создаете эти изображения так же быстро, как вы можете изменить fps вашего видео, например, если вы используете рекурсивно requestAnimationFrame(), вы будете иметь 60 кадров в секунду. Таким образом, вместо чтения видео html5 вы должны установить время каждые 1/30 секунд (например, если вы хотите 30fps видео) и создать изображение из текущего времени до конца видео. И если у вас есть не только один холст, если вы применяете анимацию на своем видео с помощью нескольких холстов, вы можете создать новый пустой холст и нарисовать на нем все данные холста, чтобы создать только одно изображение вместо одного изображения для каждого холста.

Приветствия из Франции

Ответ 5

Я работал над инструментом, который делает что-то похожее на ваши требования. Он в основном использует cutycapt (или любой другой инструмент для преобразования HTML с CSS в изображение) и выполняет серию снимков экрана в зависимости от требуемой частоты кадров.

Для этого анимации должны быть чисто CSS-анимациями, а инструмент интерполирует свойства CSS промежуточного кадра, анализируя CSS.

https://github.com/bpsagar/css2video

Я не уверен, что инструмент завершен, дайте мне знать, если вы заинтересованы.

Ответ 6

Я сделал в прошлом через онлайн-сайт. Я загрузил html5 анимацию на сайт http://html5animationtogif.com и получил анимированный GIF файл. После этого я загрузил свой gif файл на https://cloudconvert.com/gif-to-mp4 и получил файл MP4. Это был мой способ конвертировать html5 анимацию в MP4. Не уверен, что это был лучший способ. Но это сработало для меня. Надеюсь, этот ответ поможет.

Ответ 7

Flash имеет возможность сделать это. HTML5 анимация представляет собой комбинацию HTML, CSS, JavaScript и изображений. Обычно таймер javascript используется для анимации отдельных DIV, изображений и т.д. Нет доступных инструментов, которые могут принимать ввод html5 и напрямую экспортировать видео. Недавно я использовал этот сайт https://html5animationtogif.com/ для конвертации моего html5 в mp4 и webm. Одна из основных проблем анимации на основе холста заключается в том, что они не могут работать на скорости 60 кадров в секунду в браузере. Один тайм-аут занимает примерно 20 миллисекунд. Принимая во внимание, что для 60 кадров в секунду функция таймера должна зацикливаться в течение 16 миллисекунд. Также это зависит от эффекта анимации. Если эффект занимает больше процессора, функция таймера не будет зацикливаться в течение 20 миллисекунд. Иногда он может пропустить и завершить цикл в течение 40 или 60 миллисекунд.

Надеюсь это поможет.