A client asked us to make a website where we will not use any slideshow but we will put a video to play in the background .
We tried to implement it with youtube but there was a problem… Youtube loads slow so there is 3-4 sec problem.
What we did is to upload the .mp4 videos to our server and make a html5 multi video player with a loop .
How to put an html 5 multi video player with loop
- install sourcerer plugin
- enable the plugin
- Create a new module in any position you want. You can create also a new position that will cover the whole site
- Insert this code with the «insert code » button
<video id=»homevideo» width=»100%» autoplay muted onended=»run()»>
<source src=»media/video1.mp4″ type=’video/mp4’/>
videoPlayer = document.getElementById(«homevideo»);
if (video_count == 4) video_count = 1;
var nextVideo = «media/video»+video_count+».mp4″;
videoPlayer.src = nextVideo;
What this code do is play mp4 video from /media/video1.mp4 path. When this video ends it loads thw video2.mp4 video until it goes up to video4.mp4 video and starts again …
autoplay means to start playing auto
muted means without any sound