重复的视频元素在 HTML 中不起作用？

发布于 2025-01-09 07:05:12 字数 2939 浏览 1 评论 0原文

我已向该 REPL 项目添加了四个 HTML 视频元素，有时加载第一个和第三个视频元素，有时仅加载第一个视频元素。为什么所有视频都没有播放？所有代码都是相同的：REPL代码链接

我还添加了下面的 HTML 和 CSS 代码；但是，我无法在 Stack Overflow 中上传 mp4 文件。因此，如果您运行该代码片段，它将不会显示视频。您必须单击 REPL 链接才能重现该问题。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
/*   background-color: black;
 */  color: white;
  padding: 30px;
  border: 1px solid green;
  hegith: 100%;
}

.outterscreen {
  background-color: black;
  border: 1px solid red;
  padding: 5px;
  height: 80%;
/*           overflow-y:auto;
 */
}

.msg {
/*   background-color: #191919;
 */  padding: 10px;
  left-padding: 15px;
  right-padding: 15px;
  margin-top: 20px;
  border-radius: 5px;

  border: 2px solid blue;
  background: #191919;

}

.text {
  border: 1px solid grey;
  color: white;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>The Intro</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="outterscreen">
      
      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>

      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>

      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>

      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>
      
    </div>
    <script src="script.js"></script>
  </body>
</html>

这是 REPL 链接 -> REPL 代码链接

原文

I've added four HTML video elements to this REPL project and sometimes the first and third video load and other time it's only the first video element that loads the video. Why aren't all the videos running? All the code is the same: REPL code link

I've also added the HTML and CSS code below; however, I'm not able to upload an mp4 file in Stack Overflow. So, if you run the snippet, it won't display the video. You have to click the REPL link to reproduce the issue.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
/*   background-color: black;
 */  color: white;
  padding: 30px;
  border: 1px solid green;
  hegith: 100%;
}

.outterscreen {
  background-color: black;
  border: 1px solid red;
  padding: 5px;
  height: 80%;
/*           overflow-y:auto;
 */
}

.msg {
/*   background-color: #191919;
 */  padding: 10px;
  left-padding: 15px;
  right-padding: 15px;
  margin-top: 20px;
  border-radius: 5px;

  border: 2px solid blue;
  background: #191919;

}

.text {
  border: 1px solid grey;
  color: white;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>The Intro</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="outterscreen">
      
      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>

      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>

      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>

      <div class="msg">
       
          <video width="320" height="240"  muted autoplay>
            <source src="videos/vid_one_earth_overview.mp4" type="video/mp4">
        </video>

        <div class="text">
            test
          </div>
        
      </div>
      
    </div>
    <script src="script.js"></script>
  </body>
</html>

Here's the REPL link -> REPL code link

分享到QQ

分享到微博