Выполнение этого на сервере является сложной проблемой, поскольку только самые последние браузеры отображают HTML 5, а большинство серверов работают под управлением Linux, на которых не установлены последние версии браузеров. Даже если они это сделают, это сводится к взломам буферизации экрана X11, которые еще менее надежны, чем у Коперника, и в конце усилий вы просто захотите, чтобы вы все сделали с кистью и кинокамерой super-8, чтобы сделать это быстрее. :-)

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

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

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

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

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

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

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

Ответы на вопрос(7)

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

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

(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);
}());
 karlcow05 февр. 2011 г., 16:55
webkit2png делает только один выстрел. Маловероятно, что несколько захватов webkit2png решат проблему. Я думаю, что можно было бы создать цикл, в котором между первоначальным рендерингом и захватом будет задержка, но тогда станет громоздким иметь что-то осмысленное. Изображения не будут полностью синхронизированы. Интересно, можно ли взломать webkit2png, чтобы он выталкивал несколько изображений?
 Russell Leggett08 февр. 2011 г., 14:59
Я очень сомневаюсь, что я смогу заставить что-либо работать из фактического стандартного браузера в javascript, но, не тратя часов на то, чтобы понять это, мне интересно, смогу ли я сделать что-то нативное, например, webkit2png, просто вывести 30fps или это было бы невозможно в середине CSS-преобразования. То, что также могло бы работать очень хорошо, это внедрить функцию в объектную модель браузера takeScreenshot (), которую я мог бы использовать во время анимации на основе JavaScript, такой как остановка движения. Анимация JavaScript не должна работать в режиме реального времени.
 karlcow05 февр. 2011 г., 16:37
тогда вы хотите сбросить свой контекст окна в виде изображений. Что может быть более сложным.
 Russell Leggett05 февр. 2011 г., 15:15
Я перечислил это как возможность в своем вопросе, но мне бы очень хотелось что-то, что включает в себя весь спектр опций. Это не будет, например, захватывать анимацию CSS3 или SVG.
 karlcow06 февр. 2011 г., 17:57
опрашивать браузеров разработчиков. Кажется, что контекст безопасности запретил бы это. Но я все еще ищу информацию.

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

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

Решение Вопроса

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

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

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

 Abhinav22 февр. 2015 г., 15:52
Видите, я тоже пытаюсь добиться чего-то похожего на это. Мне нужно работать на сервере, хотя. Я исследовал много вариантов в последнее время. Я только что закончил с использованием JavaFX с imageJ для достижения этой цели. Но этот процесс трудно наращивать. Так что если вы сможете поделиться чем-нибудь полезным, это будет высоко оценено. ТИА
 Abhinav22 февр. 2015 г., 15:50
Привет @russel, Это было давно, и мне было интересно, если вы придумали более продвинутый взгляд на вашу проблему.
 Russell Leggett28 февр. 2015 г., 05:10
Я перешел в этот момент. Я бы сказал, что проще всего попробовать (если вы хотите попробовать пойти по этому пути), используя фантомы. без особых проблем вы сможете использовать метод рендеринга (phantomjs.org/api/webpage/method/render.html). Не уверен, насколько эффективно было бы создать полную анимацию таким образом :)

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

 Brian Topping06 янв. 2011 г., 21:57
Выполнение этого на сервере является сложной проблемой, поскольку только самые последние браузеры отображают HTML 5, а большинство серверов работают под управлением Linux, на которых не установлены последние версии браузеров. Даже если они это сделают, это сводится к взломам буферизации экрана X11, которые еще менее надежны, чем у Коперника, и в конце усилий вы просто захотите, чтобы вы все сделали с кистью и кинокамерой super-8, чтобы сделать это быстрее. :-)
 Russell Leggett06 янв. 2011 г., 21:48
Да, я уже скачал это и попробую позже, но я надеялся на что-то более программное. Кроме того, я в основном слышу, что он часто падает и его трудно использовать.

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

 Russell Leggett10 янв. 2011 г., 04:36
Я не делаю подкаст о html, я просто пытаюсь сделать короткую анимацию, используя html, которая может быть включена в видео - но видео не является демонстрацией html. Я не хочу, чтобы это выглядело как скринкаст - я просто хочу, чтобы оно выглядело как скользкое видео.

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

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

https://github.com/bpsagar/css2video

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

Ваш ответ на вопрос