mardi 11 décembre 2018

Load a Random background video on load without repeating same video

I've been working on this homepage background video for quite a while and always try to tinker with it to make it better.

I just did a test and it took 37 page refreshes to load each of my 12 videos at least once. I stopped when I had finally seen all videos at least once, but that meant I saw some 5 times.

I used Squarespace but it's a custom HTML homepage. http://www.rupertlaycock.com

window.onload=function(){
var videoList = [
'a',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'j',
'k',
'l'
];
$("#splash-vid").html("<video id='bgvid' autoplay muted id='bgvid' loop><source src='s/" + videoList[Math.floor(Math.random() * videoList.length + 1)]  + ".mp4' type='video/mp4'>");
}

Plus here's my code for changing the extension to .webm for chrome, as I have the same videos uploaded into the same folders, ie "a.mp4" & "a.webm"

if (window.chrome)
$("[type=video\\\/mp4]").each(function()
{
    $(this).attr("src", $(this).attr("src").replace(".mp4", ".webm"));
    $(this).attr("src", $(this).attr("src").replace("/mp4", "/webm"));
});}

If anyone has any improvements on this I'd be insanely grateful!




Aucun commentaire:

Enregistrer un commentaire