我想在屏幕上随机显示一些视频片段，每次一次。当我不链接任何样式表(包括字体(时，该网站工作得很好，但一旦我链接了一些视频播放器，即使源视频在那里，它也会变空。
这是我的代码：https://codepen.io/ondersumer07/pen/poJVdVp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vinematik</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid-container">
<h1 class="grid-header">Vinematik</h1>
<div class="vid">
<video class="grid-video" height="720" width="1280" controls>
<source id="vsrc" />
Please update your browser.
</video>
</div>
<p class="grid-p"><i>Aykut Elmas</i> vine testi</p>
</div>
<script>
document.getElementById("vsrc").src = Math.floor((Math.random() * 3) + 1) + ".mp4";
</script>
</body>
</html>
注意：我从本地文件夹中获取视频。它们被命名为1.mp4、2.mp4等
创建视频元素，如下所示。
<video class="grid-video" height="720" width="1280" controls id="videoEl">
<source id="vsrc" type='video/mp4'/>
Please update your browser.
</video>
更改您的java脚本代码，如下所示。
document.getElementById("vsrc").src = Math.floor((Math.random() * 3) + 1) + ".mp4";;
document.getElementById("videoEl").load();
基本上，一旦设置了源，就需要加载视频元素。