Dynamically create a HTML5 video element without it being shown in the page

Question

Is it possible to dynamically create a HTML5 video element so that I can access the element by API's like document.getElementById or Name but it may not show up in the webpage.

Something like div.hide() or something in that direction ?

Answer 1

You can try

var video = document.createElement('video');  video.src = 'urlToVideo.ogg'; video.autoplay = true; 

you can also use the canPlayType method to check if the browser supports the video format you want to use before setting source

if (video.canPlayType('video/ogg').length > 0) {     /* set some video source */ } 

The method returns maybe or perhaps depending on browser. If empty string it means it can't play it.

You can now use the video using the API. Just store it globally. You can later insert it into the DOM. Hope this helps.