Автоматически воспроизводить и зацикливать видео при загрузке

Я хочу, чтобы пользователи могли загружать короткие видеофайлы для вставки в свои сообщения, и хочу, чтобы поведение форума по умолчанию было настраиваемым: такие видео должны автоматически воспроизводиться, зацикливаться и быть без звука. Это позволит использовать видео вместо GIF-анимаций, как это работает в Discord (на самом деле видео в основном приходят из Discord, где, похоже, часто используют .mp4 вместо gif).

В этой теме показано, как написать HTML для автоматического воспроизведения и зацикливания видеофайла:

<video width="100%" height="100%" preload="metadata" controls="" autoplay>
      <source src="https://www.simscale.com/forum/uploads/default/original/3X/d/6/d6fab77fb56eeb98ef660d682f344dba4bbb66ce.mp4">
      <a href="https://www.simscale.com/forum/uploads/default/original/3X/d/6/d6fab77fb56eeb98ef660d682f344dba4bbb66ce.mp4">/forum/uploads/default/original/3X/d/6/d6fab77fb56eeb98ef660d682f344dba4bbb66ce.mp4</a>
</video>

Это работает, но я не могу понять, как применить это, когда пользователь пишет сообщение и загружает видеофайл. Обратите внимание, что в этом примере используется полный URL-адрес видеофайла. Пользователи не имеют доступа к нему при загрузке файла. Кроме того, если загруженные файлы перемещаются на сервере или переносятся на другого провайдера S3 или CDN, URL-адрес также перестанет работать.

Когда пользователь загружает файл, в поле ответа он получает Markdown следующего вида:

![happy-birthday|video](upload://abcdefg123456789.mp4)

Похоже, что пользователь не может просто преобразовать это в необходимый HTML для автоматического воспроизведения и зацикливания (без звука) видео. Есть ли какой-то доступный метод для этого? И ещё лучше: есть ли способ сделать это поведение по умолчанию для всего форума? Или хотя бы оставить эту функцию включённой по умолчанию и позволить пользователю отказаться от автоматического воспроизведения и зацикливания при загрузке и публикации (если это сейчас невозможно, я хотел бы подать это как запрос на новую функцию :slight_smile: )

Привет :waving_hand:

Я думаю о двух способах, как это можно реализовать.

Первый способ — самый простой: создать небольшой компонент темы, который с помощью плагина API api.decorateCookedElement находит все видео в постах и добавляет им необходимые атрибуты (autoplay, loop и т.д.).

Это изменит HTML всех видео в постах на всём сайте. В редакторе (композиции) по-прежнему будет отображаться ваш упомянутый выше маркдаун-код видео:
![happy-birthday|video](upload://abcdefg123456789.mp4)

Плюсы: затрагивает все видео на сайте (включая ранее загруженные).
Минусы: пользователи не могут контролировать это, так как изменения применяются к опубликованным постам. Поскольку это влияет на все видео, если в теме много видео, одновременное их воспроизведение может вызвать проблемы.


Второй вариант требует чуть больше работы. Это модальное окно, где пользователи могут выбирать, какие атрибуты добавить к загружаемому видео. Его можно активировать, добавив специальную кнопку в редактор, или настроить автоматическое появление при обнаружении загрузки видео.

После настройки в редактор вставляется HTML-код видео с добавленными атрибутами:

<video width="100%" height="100%" preload="metadata" controls="" autoplay>
    <source src="https://www.simscale.com/forum/uploads/default/original/3X/d/6/d6fab77fb56eeb98ef660d682f344dba4bbb66ce.mp4">
    <a href="https://www.simscale.com/forum/uploads/default/original/3X/d/6/d6fab77fb56eeb98ef660d682f344dba4bbb66ce.mp4">/forum/uploads/default/original/3X/d/6/d6fab77fb56eeb98ef660d682f344dba4bbb66ce.mp4</a>
</video>

Отличный пример такого подхода — компонент темы Insert Video.

Плюсы: пользователи могут управлять атрибутами своих видео, отключать автозапуск и т.д., поэтому темы с большим количеством видео будут работать корректно.
Минусы: это не затронет старые видео. Но это не критично, так как весь второй подход ориентирован именно на контроль пользователей над своими видео.


Кроме того

Первый метод можно комбинировать с настройкой пользователя или группой. Тогда пользователи смогут настраивать поведение видео. Например: «Включить автозапуск видео» или вступить в группу, которая активирует автозапуск и т.д.


Редактирование: только что подумал, что забыл про ленивую загрузку (lazy load). Вероятно, первый способ сейчас не сработает, потому что ленивая загрузка загружает видео только после нажатия пользователем на кнопку воспроизведения миниатюры. Я ещё не пробовал это в действии… :thinking:

Да, я думаю, что лучше всего было бы сделать это настраиваемым для пользователя — чтобы он мог решить, включать это или нет. Интересно, насколько сложно это реализовать? Считается ли это «компонентом темы»?