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