我正在尝试在网格中显示视频，如此处的示例 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>最佳答案
试试这个，
<!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%;
}
video{
width:100%;
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.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>关于javascript - Javascript 在网格 HTML 中动态添加视频元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38408373/