通过JavaScript动态创建HTML5视频

Question

我想要做的是显示数量不同的视频。

我知道我必须使用appendChild，但我不知道如何找到任何有用的东西。

如果有人可以给我一个如何做到这一点的提示，我真的很感激。

[UPDATE] 好的..我现在有基本功能，但我还有一个小问题。我需要把视频窗放在彼此之下。我知道如何做到这一点，但我不太确定它是否可能以我想要的方式实现。我想使用上一个视频的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>