アップロード時に動画を自動再生・ループ再生

投稿に埋め込む短い動画ファイルをユーザーがアップロードできるようにしたいと考えています。また、フォーラムのデフォルトの動作を、動画が自動再生、ループ、ミュートされるように設定可能にしたいです。これにより、動画はDiscordで機能するのと同じようにGIFの代替として使用できます(実際、動画の多くはDiscordから来ており、DiscordはGIFの代わりに.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>

これは機能しますが、ユーザーが投稿を作成して動画ファイルをアップロードする際に、これをどのように使用できるかがわかりません。この例では、動画ファイルへの完全なURLが使用されていることに注意してください。これは、ユーザーがファイルをアップロードする際には利用できません。また、ユーザーがアップロードしたファイルがサーバー上で移動されたり、別のS3プロバイダーやCDNに移動されたりすると、URLは壊れてしまいます。

ユーザーがファイルをアップロードすると、返信ボックスに次のようなMarkdownが表示されます。

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

そのため、ユーザーが動画を自動再生およびループ(ミュート)させるために必要なHTMLにこれを単純に変換することはできないようです。これには何か方法がありますか?さらに良いことに、フォーラム全体でこれをデフォルトの動作にすることはできますか?少なくとも、この動作をデフォルトで有効にし、ユーザーがアップロードと投稿を行う際に自動再生とループ設定をオプトアウトできるようにすることはできますか?
(もし現在不可能であれば、これを機能リクエストとして提出したいと思います :))

こんにちは :waving_hand:

可能性のある方法を2つ考えています。

1つ目は最も簡単な方法で、プラグインAPI api.decorateCookedElement を使用して、投稿内のすべての動画を見つけ、これらの属性(自動再生、ループなど)を追加する小さなテーマコンポーネントを作成します。

これにより、サイト全体の投稿内のすべての動画のHTMLが変更されます。コンポーザーには、前述の動画Markdownコードが表示されたままになります。
![happy-birthday|video](upload://abcdefg123456789.mp4)

長所:サイト全体の動画に影響します(以前のアップロードも含む)。
短所:公開済みの投稿で発生するため、ユーザーは制御できません。すべての動画に影響するため、多数の動画があるトピックで同時に再生を開始すると問題が発生する可能性があります。


2つ目のオプションは、少し手間がかかります。これは、ユーザーがアップロードされた動画に追加する属性を制御できるモーダルです。コンポーザーに特定のボタンを追加するか、動画のアップロードを検出したときに自動的にトリガーするようにすることができます。

完了すると、追加された属性を含む動画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 テーマコンポーネントです。

長所:ユーザーは動画の属性を制御でき、自動再生などを無効にすることを選択できるため、動画が多いトピックでも問題ありません。
短所:古い動画には影響しません。しかし、この2番目のプロセス全体がユーザーが動画をどのように制御できるかに関するものであるため、大きな欠点ではありません。


プラス

1つ目の方法は、ユーザー設定またはグループと組み合わせることができます。これにより、ユーザーは動画の動作を設定できます。
たとえば、「動画の自動再生を有効にする」や、動画の自動再生などを有効にするグループに参加するなど…


編集:遅延読み込みを忘れていたことに気づきました。おそらく、遅延読み込みはユーザーがサムネイルの再生ボタンをクリックした場合にのみ動画をロードするため、最初のプロセスは現在機能していない可能性があります。まだ試していません… :thinking:

「いいね!」 2

はい、ユーザーが設定したいかどうかをユーザーが設定できるようにするのが最善だと思います。これを実現するのはどのくらい難しいでしょうか?これは「テーマコンポーネント」と見なされますか?