Dynamic creation of HTML5 Videos via JavaScript

what I want to do is to display videos which differ in their number.

I do know that I have to use appendChild, but I have no clue how and I couldn't find anything helpful so far.

I'd really apreciate it if someone could give me a hint how to do this.

[UPDATE] Ok .. I have my basic function now, but I still have one little problem. I need to place the videowindows below each other. I have an idea how to do that, but I'm not quite sure if its possible the way I want to do it. I want to use the top attribute of the last video and sum it up by some static value:

<script type="text/javascript">
        var myVideo;
        var i;
        //Funktion zum Videoaufruf
        function getVideo(){
            var mp4Array = new Array();
            var ogvArray = new Array();

            mp4Array[0] = "http://poirecognition.konscio.de/media/BBB_H264_HB.mp4";
            ogvArray[0] = "http://poirecognition.konscio.de/media/BBB_theora.ogv";
            mp4Array[1] = "http://poirecognition.konscio.de/media/FHBocholt.mp4";
            ogvArray[1] = "http://poirecognition.konscio.de/media/FHBocholt.ogv";

            var myVideo = new Array();
            for(i = 0; i < mp4Array.length; i++){
                myVideo[i] = document.createElement("video");
                if(Modernizr.video){
                    if(Modernizr.video.ogg){
                        //Firefox, Opera, Chrome
                        myVideo[i].src = ogvArray[i];
                        setVideoOptions(myVideo[i], i);
                    }else if(Modernizr.video.h264){
                        //Safari, Chrome, IE, IPhone, Android
                        myVideo[i].src = mp4Array[i];
                        setVideoOptions(myVideo[i]);
                    }
                }else{
                    alert("HTML5 Video-Tag wird nicht unterstützt");
                }
            };
        }   

        function setVideoOptions(tempVideo, i){
            tempVideo.controls = true;
            tempVideo.style.position = "absolute";
            tempVideo.style.left = "650px";
            tempVideo.style.width = "360";
            tempVideo.style.height = "240";
            if (i>0) {
                tempVideo.style.top = myVideo[i-1]+"300px";
            } else{
                tempVideo.style.top = "20px";
            };
        }
</script>

[UPDATE 2] Ok .. I found a way to solve my problem, but now I have another: The videowindows are not visible which has something to do with the video element being created via JS... no clue how to solve this. Strange enough if I set the video to load and play I do hear the audio from the video ..

<script type="text/javascript">
        var myVideo = new Array();
        var i;
        //Funktion zum Videoaufruf
        function getVideo(){
            var mp4Array = new Array();
            var ogvArray = new Array();

            mp4Array[0] = "http://poirecognition.konscio.de/media/BBB_H264_HB.mp4";
            ogvArray[0] = "http://poirecognition.konscio.de/media/BBB_theora.ogv";
            mp4Array[1] = "http://poirecognition.konscio.de/media/FHBocholt.mp4";
            ogvArray[1] = "http://poirecognition.konscio.de/media/FHBocholt.ogv";

            for(i = 0; i < mp4Array.length; i++){
                myVideo[i] = document.createElement("video");
                if(Modernizr.video){
                    if(Modernizr.video.ogg){
                        //Firefox, Opera, Chrome
                        myVideo[i].src = ogvArray[i];
                        setVideoOptions(myVideo[i], i);
                    }else if(Modernizr.video.h264){
                        //Safari, Chrome, IE, IPhone, Android
                    开发者_如何学JAVA    myVideo[i].src = mp4Array[i];
                        setVideoOptions(myVideo[i]);
                    }
                }else{
                    alert("HTML5 Video-Tag wird nicht unterstützt");
                }
            };
        }   

        function setVideoOptions(tempVideo, i){
            tempVideo.controls = true;
            tempVideo.style.position = "absolute";
            tempVideo.style.left = "650px";
            tempVideo.style.width = "360";
            tempVideo.style.height = "240";
            if (i>0) {
                var tmpTop = myVideo[i-1].style.top.substring(0, myVideo[i-1].style.top.length-2);
                tmpTop = parseInt(tmpTop);
                tmpTop += 300;
                tempVideo.style.top = tmpTop;
            } else{
                tempVideo.style.top = "20px";
            };
        }
        </script>

[UPDATE 3] Ok .. I simply forgot the appendChild function. :)

<script type="text/javascript">
        var myVideo = new Array();
        var i;
        //Funktion zum Videoaufruf
        function getVideo(){
            var mp4Array = new Array();
            var ogvArray = new Array();

            mp4Array[0] = "http://poirecognition.konscio.de/media/BBB_H264_HB.mp4";
            ogvArray[0] = "http://poirecognition.konscio.de/media/BBB_theora.ogv";
            mp4Array[1] = "http://poirecognition.konscio.de/media/FHBocholt.mp4";
            ogvArray[1] = "http://poirecognition.konscio.de/media/FHBocholt.ogv";

            for(i = 0; i < mp4Array.length; i++){
                myVideo[i] = document.createElement("video");
                if(Modernizr.video){
                    if(Modernizr.video.ogg){
                        //Firefox, Opera, Chrome
                        myVideo[i].src = ogvArray[i];
                        setVideoOptions(myVideo[i], i);
                    }else if(Modernizr.video.h264){
                        //Safari, Chrome, IE, IPhone, Android
                        myVideo[i].src = mp4Array[i];
                        setVideoOptions(myVideo[i]);
                    }
                }else{
                    alert("HTML5 Video-Tag wird nicht unterstützt");
                }
            };
        }   

        function setVideoOptions(tempVideo, i){
            tempVideo.controls = true;
            tempVideo.style.position = "absolute";
            tempVideo.style.left = "650px";
            tempVideo.style.width = "360";
            tempVideo.style.height = "240";
            if (i>0) {
                var tmpTop = myVideo[i-1].style.top.substring(0, myVideo[i-1].style.top.length-2);
                tmpTop = parseInt(tmpTop);
                tmpTop += 300;
                tempVideo.style.top = tmpTop;
            } else{
                tempVideo.style.top = "20px";
            };
            document.body.appendChild(tempVideo);
        }
        </script>