Change video via javascript about vidage

[Porco-Rosso]

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

[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.