CODEWITHSUNDEEP
htmlvideo
Codeface
Codeface

Reputation: 29

HTML5 Video loop fade

I'm making a site with a video background. At the moment I have the background looping as the users moves throughout but when the video ends it just jumps to the start again. I cann't figure out how to get it to fade out a second or two early into the start of the video again. I have seen it done on other sites such as:

http://www.theguardian.com/world/interactive/2013/may/26/firestorm-bushfire-dunalley-holmes-family

Here is my current code:

<video id="video_background" preload="auto" autoplay="true" loop="loop"> <source src="assets/video/street1.mp4" type="video/mp4">

Any help would be greatly appreciated

Upvotes: 1

Views: 3972

Answers (1)

David
David

Reputation: 4895

One way is to edit your video itself.

Cut the 5 last seconds of your video, and paste it at the beginning. Then give to the transition a kind of fade effect.

There are lot of software which can help you to do that.

Upvotes: 2

Related Questions