-1

I've created a short animation, that I would like to implement into my website.

The animation is only a couple of seconds long and it has no sound.

I would like to implement it, like one would implement a GIF, meaning: I want it to autoplay, run in a constant loop and I don't want there to be any controls.

And so I rendered a GIF and for comparison I also rendered a .mp4-video and the .mp4 is far superior:

mp4: Looks exactly like I want it to look.

GIF: Even after splitting the frame-rate in half, the GIF-file is still about 5x larger then the .mp4 and it looks very noticeably worse.

So, of course, I'm implementing the .mp4 and this is how I did it: <video autoplay muted loop> – This works perfectly fine on desktop, but it does not work perfectly fine on mobile.

On Desktop it basically behaves like a GIF, but on mobile it does not autoplay and when I click on play it opens the video in a sort of "lightbox", or player, where everything else is gone and I just see the video.

I want the video, on mobile, to also autoplay and I don't want the browser to open any sort of player, how can I do this? Or: Is this possible?

I really don't wanna work with a GIF, if possible. The .mp4 is just much better.

If this is not possible with CSS, maybe there is a JS-way?

Simon R.
  • 151
  • 10

1 Answers1

1

I've tried it on a mobile device and it auto plays fine for me. Perhaps the playsinline attribute could help you out. You should use the playsinline attribute for mobile devices if you don't want the video to start in fullscreen while playing.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline

Arjan
  • 599
  • 5
  • 23
  • Thank You, Very Much! `playsinline` is what I needed, but it still does not autoplay for me. – If you want, you can take a look at the actual site I'm working on: https://www.simon-reiter.com/projects/religion.html – Please note, that this is still very much work in progress. – You have to make your viewport less then, or equal to: 600px wide and then you will see a video with `autoplay`. – It autoplays on my desktop, but not on my iPhone and I did test this in multiple browsers, maybe it's a general iPhone-Thing? I don't know… – Simon R. Nov 13 '21 at 16:38
  • I just found out that: `HTMLMediaElement.play()` exists, maybe that could be a solution, but I still have to figure this out… – Simon R. Nov 13 '21 at 16:48
  • The video did not autoplay on my iPhone because: "Low Power Mode", was active. – Found that out here: https://stackoverflow.com/questions/47655077/autoplay-muted-video-ios-11-2 :) – Simon R. Nov 14 '21 at 08:23