Is it necessary for a video element feeding a VideoTexture to be in the document?

Questions
, ,
1

In this example the video feeding the VideoTexture is added to the DOM.
Is it necessary for it to be in the DOM? I played around with the example, and found that it at least seems to not be the case. The example works just as well if the video element isn’t in the DOM, but I’m fearing a scenario where the browser is at some point low on resources or something like that and then finding a playing video and figuring it can get rid of it since it’s not in the DOM.

In my app I need to use a VideoTexture and have some limitations where I must not have its source in the DOM, so I need to be sure I can rely on it being 100% OK.

Thanks in advance!

2

How do you do it without DOM?

I’m currently working on an example where I don’t specify the video in the HTML, as it is loaded in the script on demand. But it is then in the DOM.


case 'video':
// ...........https://bobbyhadz.com/blog/javascript-create-video-element ....................................

const video = document.createElement('video');
videoIdx ++;
videos[ videoIdx ] = video;
videos[ videoIdx ].src = media[ mediaIdx ][ 2 ]; 
///////////////////////////////////////////////////////
//videos[ videoIdx ].autoplay = true;
//videos[ videoIdx ].play( );
//videos[ videoIdx ].controls = true;
//videos[ videoIdx ].muted = true;
// videos[ videoIdx ].crossOrigin = 'anonymous';
videos[ videoIdx ].loop = true; 

const videoTexture = new THREE.VideoTexture( videos[ videoIdx ] );
videoTextures[ videoIdx ] = videoTexture;

//console.log( videoIdx , videoTexture ) /////////////////////////////////////////////////////////////////

videoTextures[ videoIdx ].minFilter = THREE.LinearFilter;
videoTextures[ videoIdx ].magFilter = THREE.LinearFilter;
videoTextures[ videoIdx ].format = THREE.RGBAFormat;

const videoMesh = new THREE.Mesh( mediaGeometry, getMaterial( 'MeshBasic', { map: videoTextures[ videoIdx ] } ) );
videoMesh.name =  arr[ j ] + '-edgeVideo-' + edge[ i ][ 0 ] + '->-' + edge[ i ][ 1 ];
objToRaycast.push( videoMesh );
scene.add( videoMesh );

const videoMeshBack = new THREE.Mesh( mediaGeometryBack, getMaterial( 'MeshBasic', { map: videoTextures[ videoIdx ] } ) );
videoMeshBack.name =  arr[ j ] + '-edgeVideo-' + edge[ i ][ 0 ] + '->-' + edge[ i ][ 1 ];
objToRaycast.push( videoMeshBack );
scene.add( videoMeshBack );

break;

case 'action':
// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
break;
3

Maybe I’m confusing terminology here. I meant that video is not appended as a node to the document tree. Isn’t that what being in the DOM means?

4

see Document Object Model - Wikipedia

"JavaScript

When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document that acts as an interface between JavaScript and the document itself. This allows the creation of dynamic web pages,[12] because within a page JavaScript can:

add, change, and remove any of the HTML elements and attributes
change any of the CSS styles
react to all the existing events
create new events"

5

Thanks, but that doesn’t really answer my question. I’ll rephrase it. I mean when the video element is in the document tree.

6

I do not think it is possible, but it would be cool if it was yes.

7

I’m sorry, I don’t understand what you mean

8

Maybe you can get more clarity there?
javascript - Why are videos played before inserted into DOM? - Stack Overflow