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
{source}
<html>
<head>
</head>
<body>
<video id=”homevideo” width=”100%” autoplay muted onended=”run()”>
<source src=”media/video1.mp4″ type=’video/mp4’/>
</video>
<script>
video_count =1;
videoPlayer = document.getElementById(“homevideo”);
function run(){
video_count++;
if (video_count == 4) video_count = 1;
var nextVideo = “media/video”+video_count+”.mp4″;
videoPlayer.src = nextVideo;
videoPlayer.play();
};
</script>
</body>
</html>
{/source}
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
Thats it!
{fcomment}