1

I'm working on a Vue app but the issue is more vanilla

when I create video element dynamically with

document.createElement('video')

and assign the src,

I can see it download the video on the network tools even if it's not added on the page, which is the behaviour I want .

However, when I add it to the page with document.addChild, it loads the video again from the src, how do I avoid this? It should use the existing video data.

The reason that I wanted to do this is to cache lots of video data while the user is in a different part of the journey.

Note, I am seeing this behaviour in Brave Browser but not Firefox or safari.

Nikos
  • 7,295
  • 7
  • 52
  • 88
  • 1
    Maybe you can try out the `preload` attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-preload . It could be that its just browser differences though. – Flame Mar 11 '22 at 15:26
  • Does it work better if you make the video object **hidden** (via setting `style.visibilty` to hidden), then just `addChild` it before adding a `src`. This way it loads once but is not visible on page (when ready to use the video, you can `videoObjectID.style.visibility = "visible";`). – VC.One Mar 11 '22 at 20:07
  • I don't want to do that due to performance issues, can you imagine 20 video elements on the page? – Nikos Mar 14 '22 at 08:48
  • @Flame that didn't help me – Nikos Mar 14 '22 at 10:14
  • @VC.One do hidden videos take up cpu/gpu? – Nikos Mar 14 '22 at 10:41
  • @Nikos there are more ways to solve performance issues, like showing thumbnails and onclick you change it into a video element. I dont know the effects of `visibility:hidden` or `display:none` – Flame Mar 14 '22 at 12:00
  • @Flame maybe we can load the video data into non-video elements, then assign the data to the video.src somehow. Also found that if you have four or more video elements in the memory, it crashes on iPad. We just want to have two videos on the page at any one time. Atm I tried loading over 10 videos. – Nikos Mar 14 '22 at 16:14
  • If this is only in Brave but not Chrome/Firefox/Safari then it may be classified as browser bug? – Siniša Mar 15 '22 at 09:24
  • @Nikos They shouldn't stress CPU or GPU if paused and hidden. Another idea (which you were already thinking about) is to just load the data into Arrays (creating a bytes Array) and feed that to a video tag when ready. To do that get an array of video file data and use **createObjectURL** to get a path pointing to the array, finally set the path as `src` in video tag. PS: Use `load()` on the video tag to initialize the new source – VC.One Mar 18 '22 at 14:57
  • wow thanks for that one, any links to tutorials for that? – Nikos Mar 20 '22 at 15:03

0 Answers0