Динамическое создание HTML5-видео с помощью JavaScript

Question

я хочу показать видео, которые отличаются по количеству.

Я знаю, что мне нужно использовать appendChild, но я понятия не имею, как и до сих пор не смог найти ничего полезного.

Я бы очень признателен, если бы кто-нибудь мог дать мнеподсказка, как это сделать.

[ОБНОВЛЕНИЕ] Хорошо ... У меня есть основная функция, но у меня все еще есть одна небольшая проблема.Мне нужно разместить видеоокна ниже друг друга.У меня есть идея, как это сделать, но я не совсем уверен, возможно ли это так, как я хочу это сделать.Я хочу использовать атрибут top последнего видео и суммировать его по некоторому статическому значению:

<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>

[ОБНОВЛЕНИЕ 2] Хорошо .. Я нашел способ решить мою проблему, но теперь у меня есть другой: Видеоокна не видны, которые имеют какое-то отношение к элементу видео, создаваемому с помощью JS ... не знаю, как решить эту проблему.Достаточно странно, если я устанавливаю видео для загрузки и воспроизведения, я слышу звук из видео ..

<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";
            };
        }
        </script>

[ОБНОВЛЕНИЕ 3] Хорошо ... Я просто забыл функцию appendChild.:)

<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>