通过JavaScript动态创建HTML5视频

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

我确实知道我必须使用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>

---

我试图理解，但这很难。你想要某种HTML5视频幻灯片吗？对不起。英语不是我的母语。我可能需要解释我的整个应用程序来澄清一些事情：我目前正在开发一个程序，该程序应该在定义的半径内显示感兴趣的点。这些POI本身包含视频。我已经实现了一种在地图上显示它们作为标记的方法，并在单击该标记时播放它们。现在我想做同样的事情基于文本。要做到这一点，我需要以动态方式添加视频，因为视频的数量并不总是相同的。我想在某种表格中直接显示这些视频。