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

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