Κατασκευή ιστοσελίδων Κατασκευή ιστοσελίδων
Κατασκευάζουμε ιστοσελίδες. Όχι από αυτές που κυκλοφορούν , αλλά από τις άλλες τις καλές ......
More detail
Διαφήμιση Google Adwords Διαφήμιση Google Adwords
Την φτιάξατε την ιστοσελίδα. Αρκεί να μπαίνετε μόνο εσείς ; Πως θα την δουν οι υπόλοιποι; ...
More detail
Φιλοξενία ιστοσελίδων Φιλοξενία ιστοσελίδων
Υπερσύχρονοι servers , σε Ευρωπαϊκά και Ελληνικά datacenters με 99.95% uptime και κα...
More detail

html5 multi video background with loop for Joomla

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

http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-content/5051

  • 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}

 


Διαβάζουμε. Ενημερωνόμαστε. Ψαχνόμαστε. Πινουμε πολλούς καφέδες και συζητάμε.

διαφήμιση google adwords