Проиграть jpg картинки как видео

Question

Есть серия картинок в jpg формате. Как можно проиграть на странице html как видео не конвертируя в видео формат а за счет быстрой смены во Flask

Answer 1

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

Но лучше чем костыль, эту идею в принципе, не назвать, имхо

Answer 2

Переводите в формат gif
Скачиваете себе программу для создания gif-анимации
Делаете у себя локально такая картинку
Загружаете на свой сайт

Answer 3

В тег img нужно написать такой источник, который бы формировал multipart/x-mixed поток следующего формата

Content-Type: multipart/x-mixed-replace; boundary="MyMotionJPEG12345"

--MyMotionJPEG12345
Content-Type: image/jpeg

<jpeg bytes>
--MOBOTIX_Fast_Serverpush
Content-Type: image/jpeg

<jpeg bytes>
--MyMotionJPEG12345
... and so on ...
--MyMotionJPEG12345--

Между кадрами делаете задержку на стороне сервера. Это хорошо работает если картинки берутся не из файлов.

Другой вариант это сжать жепеги в "гифку" формата webm

fmpeg -framerate 1 -f image2 -pattern_type glob -i "*.jpg" \
    -c:v libvpx  -crf 12 -pix_fmt yuv420p video.webm

чтоб не потерять цвета можно -pix_fmt yuv444p, crf качество от 0 лучшее до 50 худшее

Answer 4

Сначала скачиваем все картинки, чтобы они были в кэше, а потом по таймеру меняем src у тега img. За счёт того, что картинки уже находятся в кэше, будут помменяться мнговенно. Впрочем, так скорее слайдшоу сделать можно, чем видео, а для слайдшоу предварительное выкачивание картинок не требуется.

Answer 5

По моему опыту с разными браузерами, наиболее приемлемый вариант для достижения плавности смены JPEG-картинок — это замена background-image блока + использование progressive JPEG (Полезно, например, когда нужно плавно подставить фото в более высоком разрешении).

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

.frame {
  --p1: url(https://cdn2.chikiriki.club/img/tmp/1.jpg);
  --p2: url(https://cdn2.chikiriki.club/img/tmp/2.jpg);
  --p3: url(https://cdn2.chikiriki.club/img/tmp/3.jpg);
  --p4: url(https://cdn2.chikiriki.club/img/tmp/4.jpg);
  --p5: url(https://cdn2.chikiriki.club/img/tmp/5.jpg);
  --p6: url(https://cdn2.chikiriki.club/img/tmp/6.jpg);
  width: 560px;
  height: 410px;
  background-color: #756a41;
  background-image: var(--p1), var(--p2), var(--p3), var(--p4), var(--p5), var(--p6);
  background-size: cover;
  animation: sequence 800ms 100ms infinite; 
}

@keyframes sequence {
  0%    { background-image: var(--p1), var(--p2), var(--p3), var(--p4), var(--p5), var(--p6) }
  16.7% { background-image: var(--p2) }
  33.4% { background-image: var(--p3) }
  50%   { background-image: var(--p4) }
  66.7% { background-image: var(--p5) }
  100%  { background-image: var(--p6) }
}

<div class="frame"></div>

Answer 6

написал следующее решение. через переменную z передаем список с путями до jpg файлов

{% block img %}
    <img name="slideshow">
{% endblock %}

{% block script %}
<script>
var i = 0;
var images = {{ z|safe }};
var time = 35;

function slideShow() {
    document.slideshow.src = images[i]
        if (i < images.length - 1) {
            i++;
            } else {
                i=0;
            }
    setTimeout("slideShow()", time);
}

window.onload = slideShow;
</script>
{% endblock %}

БЛОГ НА HUSL

Проиграть jpg картинки как видео

Ответы (6 шт):