Automatically play and loop video on upload

I want users to be able to upload short video files to embed in their posts, and I want the default behavior of the forum to be configurable to make such videos default to auto-play and loop, muted. So that the videos can be used as gif-replacements, the same way it works on Discord (in fact the videos are mostly coming from Discord, which uses a lot of .mp4 in lieu of gif it seems).

This topic shows how to write HTML to make a video file autoplay and 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>

This works, except, I cannot figure out how I could use this when a user is writing their post and uploading their video file. Note how in this example, the full URL to the video file is being used. This is not available to users when they upload their file, also, if the user upload files get moved around on the server or moved to a different S3 provider or CDN, the URL will also be broken.

When a user uploads their file, in the Reply box they get Markdown like this;

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

So it does not appear to be possible for a user to simply convert this into the HTML needed for their video to auto-play and loop (muted). Is there some method available for this? And even better, is there some way I could just make this the default behavior across the whole forum? Or at least leave this behavior enabled by default, and allow the user to opt-out of autoplay and loop settings when they are doing the upload & post
(its its not currently possible I would like to submit this as a Feature Request :slight_smile: )

Hello :wave:

I am thinking of two ways how it’s going to be possible.

The first one is the easiest one, simply creating a little theme component which using the plugin api api.decorateCookedElement to find all videos in posts and add these attributes. (autoplay, loop etc.)

It will modify all of the videos HTML in posts on the whole site. In the composer still the markdown video code appears you mentioned above.
![happy-birthday|video](upload://abcdefg123456789.mp4)

Pros: affected all video on the site (so the previous uploads too)
Cons: users can’t control it because it is happening on the published posts. It affects all video so if you have a topic with lots of video and these want to start at same time it can make issues.


The second option is a little more work. It is a modal where users can control which attributes will be added to the uploadid video. It can be trigger with adding a specific button to composer or makes it to trigger automatically when it detects a video upload.

When it’s done it insert the video HTML in composer which contains the added attributes.

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

A great example for this the Insert Video theme component.

Pros: users can control their videos attributes and they can choose to disable autoplay etc. so video heavy topics tol will be ok.
Cons: it won’t affect the older videos. But it’s not a big cons because this whole second process is about how users can control their videos.


Plus

The first method can be combine with a user setting or a group. With this users can set up the videos behavior.
For example: Enable autoplay videos or join a group which will activate videos autoplay etc…


Edit: I just thinking of I forgot lazy load, probable the first process is not working now because lazy load is only load the video if user click the thumbnail play button. I didn’t try it yet… :thinking:

2 Likes

yea I think the best would actually be to make it configurable by the user if they want it set or not. I wonder how difficult it would be to make this? Would this be considered a “theme component”?