Java脚本在网格HTML中动态添加视频元素

 admin  2023-05-26
Share: Twitter Facebook Pinterest Reddit VK Digg Linkedin Mix

我正在尝试在网格中显示视频，如示例http://jsfiddle.net/5qdojj83/所示

我已经修改了代码，以便动态添加来自JavaScript的视频，但现在它似乎是具有不同宽度的网格的边界。

我在JS中使用了固定宽度的视频，因为源视频可以有不同的分辨率和大小。

下面的代码有什么问题？

?

<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Grids Using CSS</title>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<style type="text/css">

.videoGrid {
    border-spacing: 2px;
    background-color: #333;
    width: 100%;
    height: 100% 
    border-collapse: collapse;
    text-align: center;
}

td {
    background-color:orange;
    border: 1px solid gray;
    padding: 6px;
    width: 33%;
    display: inline-block;
}

.videoBg {
    overflow: hidden;
}
.videoBg video{
    min-width: 100%;
    min-height: 100%;
}
</style>
</head>

<body>

<table class="videoGrid">
    <tr id="video_table">
    </tr>     
</table>

 <script>
loadImages();
 function loadImages(){

               var urls = ["http://www.w3schools.com/html/mov_bbb.mp4",
							"http://www.w3schools.com/html/mov_bbb.mp4",
							"http://www.w3schools.com/html/mov_bbb.mp4",
							"http://www.w3schools.com/html/mov_bbb.mp4"
						  ];
                        
                for(var i = 0; i < urls.length; i++) {
        		var obj = urls[i];

                   var source = document.createElement('video');
                   source.width=400;
			       source.height=300;  
    			   source.src = obj;
                   source.controls = true;
    			   source.type = "mp4";
                   

					var td  = document.createElement("td");
                    var div = document.createElement("div");
                    div.className = "videoBg";
  					div.appendChild(source);
                    td.appendChild(div);

                    document.getElementById("video_table").appendChild(td);
		       }

    }

</script>

</body>
</html>

?

转载请注明出处:http://www.fulida88.com/article/20230526/2023912.html