0

I think html2canvas is scanning the whole DOM and reading the video data, which causes them to start playing aloud.

I need it to skip the video elements, as (1) they should not be playing sound, and (2) this is hurting performance, especially on mobile.

I’ve tried ignoreElements, but I don’t think that’s the right solution. It’s still scanning the whole DOM. Is there anything else I can do?

Jonathan Stern
  • 61
  • 3
  • Does the ` – adsy Jun 30 '23 at 18:35
  • Yes - autoplay, loop, and playsinline. It doesn't start playing aloud though until html2canvas triggers. – Jonathan Stern Jun 30 '23 at 18:44
  • So I think basically these libs duplicate stuff under the hood so that's part of the issue. Not sure why that would play out loud and not on initial load though. I suspect its possibly because the browser is remembering you have that "original" one muted from previous page interactions somehow...but that's a stretch. I think you could use the `onclone` callback to target the cloned video and mute it or just straight up delete it. – adsy Jun 30 '23 at 18:53
  • One kinda weird way alternative way to do it would be to add this to the video element `onloadstart="this.volume=0"` so that even the clone gets 0 volume as default. But probs best to use `onclone` and delete it in there as you mentioned its also about perf. – adsy Jun 30 '23 at 18:55
  • Thanks @adsy - really like the onclone idea. Performance is the biggest consideration right now so thinking of hiding or deleting all photo/video elements when html2canvas triggers, then adding them back to the DOM once the render finishes. Is there a better way, or is this the only workaround? (I've tried html-to-image -- which captures only the element on the screen that I want to target -- but it's horribly unreliable: completely misses the images that I'm trying to capture) – Jonathan Stern Jun 30 '23 at 19:03
  • SO if you delete it from the clone, it wont delete it from the actual page -- just the in memory clone the library keeps (I think anyway, I'm not 100%). – adsy Jun 30 '23 at 19:19
  • `onclone` is passed a `documentClone` as an arg. And its on this you'd delete the video by doing `documentClone.querySelector('video'). // etc` – adsy Jun 30 '23 at 19:20
  • Trying this now!!! – Jonathan Stern Jun 30 '23 at 19:21
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/254318/discussion-between-jonathan-stern-and-adsy). – Jonathan Stern Jun 30 '23 at 19:33

0 Answers0