Random Video Backgrounds on Homepage

[spontans]

Hi Marius,

I'm trying to set a video background for my homepage that will play a random video each time.

My temporary website url: http://82.80.209.62/~cleanpla/sasha2017

I've added a video background via the gridder, and I run this script each time the homepage loads:

if($("body").hasClass("slug-home2")) {
var videosrc = Math.floor(Math.random() * 6) + 1;
var homeurl = 'http://82.80.209.62/~cleanpla/sasha2017/videobg/';
videopath = homeurl+videosrc+'.mp4';
$('video').attr('preload', videopath);
$('video source').attr('src', videopath);
}

uder the:
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj){}
event.

Everything works smooth and fast in Chrome, but in Safari there is usually a long lag with showing and starting a video (when going back to homepage from Info/Shop/Works page.

Is there anything I can do to preload the videos faster in safari? or maybe there is a problem with my script or the event that I'm launching it at?

Thanks in advance for any help.

[mariusjopen]

Hi Spontans,

Your script looks fine to me. But give me a day to check and I will get back to you.

Best!

Marius

[spontans]

Thank you Marius, I love you!

[arminunruh]

Hey spontanus

<video data-ar="0.75" preload="http://82.80.209.62/~cleanpla/sasha2017/videobg/3.mp4" muted="" autoplay="" loop=""><source src="http://82.80.209.62/~cleanpla/sasha2017/videobg/3.mp4" type="video/mp4"></video>

Not sure if preload="yoururl" is valid html. Maybe try just preload without ="yoururl"

[spontans]

ok, so the following steps are what i need to do?

1. disable the video background feature
2. insert this this html in gridder (maybe with some really light, 1 sec video..)
3. change the preload and source attributes with my randomizer script on "newpageshown"

[arminunruh]

No, just remove this line from your javascript:

$('video').attr('preload', videopath);

Maybe that helps!

[silviu]

@spontans said in Random Video Backgrounds on Homepage:

Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj)

hi/
how will you approach this in 2020 ?
i want to have the same , a script the randomly loads a video for the background page.
the page i'm working on is http://telegraf.studio /
thank you /

[mariusjopen]

Dear @silviu
does the solution not work?

Best!

Marius

[silviu]

hey @mariusjopen ~ thanks for replying

i'm a total noob when it comes to web / wordpress environment , so please excuse if i'm missing something obvious .
so what i understand from @spontans code , applied to my project is this

if($("body").hasClass("slug-welcome")) {
var videosrc = Math.floor(Math.random() * 2) + 1;
var homeurl = 'http://telegraf.studio/wp-content/uploads/2020/02/'';
videopath = homeurl+videosrc+'.mp4';
$('video source').attr('src', videopath);
}

i've modified the slug-home2 on the first line to my page name : slug-welcome
the math.floor is modified from 6 to 2 , in my case i would like to have just 2 movies in the folder
the path is also changed to my media folder that contains the movies.

should i also modify $ to JQuery ?

where do i place this code ? i've read about custom css/html , but just adding this to custom html head dose not
work .

thanks

[mariusjopen]

Dear @silviu

should i also modify $ to JQuery ?
This is correct.

http://laytheme.com/documentation.html#custom-javascript

Try that!

Best!

Marius

[Knudsn]

@silviu said in Random Video Backgrounds on Homepage:

hey @mariusjopen ~ thanks for replying

i'm a total noob when it comes to web / wordpress environment , so please excuse if i'm missing something obvious .
so what i understand from @spontans code , applied to my project is this

if($("body").hasClass("slug-welcome")) {
var videosrc = Math.floor(Math.random() * 2) + 1;
var homeurl = 'http://telegraf.studio/wp-content/uploads/2020/02/'';
videopath = homeurl+videosrc+'.mp4';
$('video source').attr('src', videopath);
}

i've modified the slug-home2 on the first line to my page name : slug-welcome
the math.floor is modified from 6 to 2 , in my case i would like to have just 2 movies in the folder
the path is also changed to my media folder that contains the movies.

should i also modify $ to JQuery ?

where do i place this code ? i've read about custom css/html , but just adding this to custom html head dose not
work .

thanks

Hey Silviu
Did you solve it?

I'm trying to get the above to work, but it seems like I'm missing something.

<script>
Frontend.GlobalEvents.on("newpageshown", function(layoutObj, type, obj) {
if(JQuery("body").hasClass("slug-home")) {
var videosrc = Math.floor(Math.random() * 3) + 1;
var homeurl = 'http://hidden.com/wp-content/uploads/'2020/09/';
videopath = homeurl+videosrc+'.mp4';
JQuery('video source').attr('src', videopath);
}
});
</script>

Best,
Christian

[Richard]

Dear Christian @Knudsn

Use @silviu in order to make sure silviu was notified :)

Best of Luck
Richard

[Knudsn]

Thanks @Richard-Keith!
Fingers crossed