Change video via javascript

[Porco-Rosso]

Hi, just trying to pick a random video from an array on each load but it doesn't seem to work.

function randomvideo(){
    var num = Math.floor(Math.random() * (videosmp4.length));
    document.querySelector("#vidage > source:nth-child(1)").src=videoswebm[num];
    document.querySelector("#vidage > source:nth-child(2)").src=videosmp4[num];
    console.log(num);
}

it shows the link is changed in the html elements viewer, but does not actually alter the video. Am I missing something?

[dvlden]

Hello @Porco-Rosso,

The JS itself will just run the video when it's ready to play, debounce resize event, and add a class that actually alters the video(s).

Did you load the required css file?

[Porco-Rosso]

Yes I added the css, and the default video works.
I guess it has something to do with the order of the scripts executing. I tried defer and module, but couldn't figure it out. I am attaching the page, it is rather simple.
porco.zip

Sorry if this out of scope for the project! Though a function to change the background video would be a cool addition.

[dvlden]

Hello,

Thank you for the attachment. It's an interesting find.
However, from my experience, changing sources will do nothing, as a browser already picked one of available sources and is running it.

You can find that out like this (simply pasting in browser console will do the trick):
document.querySelector('#vidage').currentSrc

You could check currentSrc for type of source that browser picked and based on that change the video:src directly, like this (providing untested code below):

const vdgElement = document.querySelector('#vidage')
const srcType = vdgElement.currentSrc.slice(vdgElement.currentSrc.lastIndexOf('.') + 1)

switch (srcType) {
  case 'webm':
    vdgElement.src = 'path_to_webm_file_source'
    break
    
  case 'mp4':
    vdgElement.src = 'path_to_mp4_file_source'
    break
}

By that logic, everything should work as normal, but it's too much mess and logic IMO.

---

Another suggestion, which I'd prefer, is to use given vidage element and load the source again when you generate sources dynamically.

It'd look something like this in your example:

randomVideo(); // I capitalized V in Video

const vdg = new Vidage('#vidage')
vdg.element.load()

You'd simply move instance of Vidage inside or outside your function after main execution is complete, set the instance to a variable to get access to the given element and give it a load.

[Porco-Rosso]

Thanks! I went with your second suggestion and works perfectly now. Thanks for teaching me a little bit.