Question

我正在尝试熟悉JavaScript中的动态元素。我已经整理了一个非常基本的例子，它将自动播放一个小视频（按照附加的CSS文件拉伸以填充屏幕）。

CSS文件：

html, body{
    margin:0;
    height:100%;
    overflow:hidden;
}
img {
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:-50%; bottom:-50%;
    left:-50%; right:-50%;
    margin:auto;
}
video {
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:-50%; bottom:-50%;
    left:-50%; right:-50%;
    margin:auto;
}

我的HTML文件：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
    <video autoplay id="VideoPlayer" src=Video.mp4></video>
</head>
</html>

这按计划进行。当页面打开时，'Video.mp4'被拉伸以适合浏览器窗口并自动播放。如果我用图像元素替换视频元素，则同样的过程也有效;图像被拉伸以适合窗口并显示在正在打开的页面上。

但是，我希望能够动态创建图像和视频元素。即用户输入可以更改视频中的元素（拉伸以适应浏览器窗口）和图像（拉伸以适合浏览器窗口）。我尝试通过此过程创建和显示视频或图像会导致显示空白（白色）屏幕。

我的尝试：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
</head>
<body>
<script type="text/javascript'>
    var DynamicVideo = document.createElement("video");
    DynamicVideo.autoplay = true;
    DynamicVideo.src = 'Video.mp4';
    document.head.appendChild(DynamicVideo);
</script>
</body>

我在Chrome中检查过该页面，视频元素已根据需要附加到头部。我在这里错过了什么？

动态视频元素 - JavaScript

0 个答案: