Reproduzir automaticamente e em loop o vídeo ao fazer upload

Suporte
1

Quero que os usuários possam carregar arquivos de vídeo curtos para incorporar em suas postagens, e quero que o comportamento padrão do fórum seja configurável para que esses vídeos sejam reproduzidos automaticamente, em loop e sem som por padrão. Para que os vídeos possam ser usados como substitutos de GIF, da mesma forma que funciona no Discord (na verdade, os vídeos vêm principalmente do Discord, que usa muitos .mp4 em vez de GIF, ao que parece).

Este tópico mostra como escrever HTML para fazer um arquivo de vídeo reproduzir automaticamente e em loop.

<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>

Isso funciona, exceto que não consigo descobrir como usá-lo quando um usuário está escrevendo sua postagem e carregando seu arquivo de vídeo. Observe como neste exemplo, o URL completo do arquivo de vídeo está sendo usado. Isso não está disponível para os usuários ao carregar seu arquivo, além disso, se os arquivos carregados pelo usuário forem movidos no servidor ou para um provedor S3 diferente ou CDN, o URL também ficará quebrado.

Quando um usuário carrega seu arquivo, na caixa de Resposta, ele recebe Markdown como este:

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

Portanto, não parece ser possível para um usuário simplesmente converter isso no HTML necessário para que seu vídeo reproduza automaticamente e em loop (sem som). Existe algum método disponível para isso? E ainda melhor, existe alguma maneira de tornar isso o comportamento padrão em todo o fórum? Ou pelo menos deixar esse comportamento habilitado por padrão e permitir que o usuário opte por não usar as configurações de reprodução automática e loop ao carregar e postar.
(Se não for possível no momento, gostaria de enviar isso como uma Solicitação de Recurso :slight_smile: )

2

Olá :waving_hand:

Estou pensando em duas maneiras como isso será possível.

A primeira é a mais fácil, simplesmente criando um pequeno componente de tema que usa a API de plugin api.decorateCookedElement para encontrar todos os vídeos nas postagens e adicionar esses atributos. (autoplay, loop etc.)

Isso modificará todo o HTML de vídeos nas postagens em todo o site. No composer, o código de vídeo markdown que você mencionou acima ainda aparecerá.
![happy-birthday|video](upload://abcdefg123456789.mp4)

Prós: afetou todos os vídeos no site (portanto, os uploads anteriores também)
Contras: os usuários não podem controlá-lo porque isso acontece nas postagens publicadas. Afeta todos os vídeos, então se você tem um tópico com muitos vídeos e eles querem começar ao mesmo tempo, isso pode causar problemas.

A segunda opção é um pouco mais trabalhosa. É um modal onde os usuários podem controlar quais atributos serão adicionados ao vídeo carregado. Ele pode ser acionado adicionando um botão específico ao composer ou fazê-lo disparar automaticamente quando detecta um upload de vídeo.

Quando estiver pronto, ele insere o HTML do vídeo no composer, que contém os atributos adicionados.

<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>

Um ótimo exemplo para isso é o componente de tema Insert Video.

Prós: os usuários podem controlar os atributos de seus vídeos e podem optar por desativar o autoplay etc., então tópicos com muitos vídeos também ficarão bem.
Contras: não afetará os vídeos mais antigos. Mas não é um grande problema, porque todo esse segundo processo é sobre como os usuários podem controlar seus vídeos.

Mais

O primeiro método pode ser combinado com uma configuração de usuário ou um grupo. Com isso, os usuários podem configurar o comportamento dos vídeos.
Por exemplo: Ativar autoplay de vídeos ou ingressar em um grupo que ativará o autoplay de vídeos etc…

Editar: Acabei de pensar que esqueci o lazy load, provavelmente o primeiro processo não está funcionando agora porque o lazy load só carrega o vídeo se o usuário clicar no botão de play da miniatura. Ainda não tentei… :thinking:

2 curtidas
3

Sim, acho que o melhor seria torná-lo configurável pelo usuário, se ele deseja ativá-lo ou não. Gostaria de saber quão difícil seria fazer isso? Isso seria considerado um “componente de tema”?