正文

HTML5视频列表JavaScript代码示例

/0 浏览量
0704

在这个示例中，我们将创建一个简单的HTML5视频列表，并使用JavaScript来控制视频的播放。这个示例将包括以下几个部分：

  1. 视频列表的HTML结构
  2. CSS样式以增强视觉效果
  3. JavaScript代码来控制视频的播放和暂停

1. 视频列表的HTML结构

首先，我们需要一个包含视频元素的列表。这里我们使用<video>标签来嵌入视频，并使用<ul>和<li>来创建一个列表。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频列表示例</title>
<style>
  /* CSS样式将在下一部分介绍 */
</style>
</head>
<body>

<ul id="videoList">
  <li><video controls>
      <source src="video1.mp4" type="video/mp4">
      您的浏览器不支持视频标签。
    </video></li>
  <li><video controls>
      <source src="video2.mp4" type="video/mp4">
      您的浏览器不支持视频标签。
    </video></li>
  <li><video controls>
      <source src="video3.mp4" type="video/mp4">
      您的浏览器不支持视频标签。
    </video></li>
</ul>

<script>
  // JavaScript代码将在下一部分介绍
</script>

</body>
</html>

2. CSS样式

接下来，我们添加一些CSS样式来增强列表的视觉效果。

#videoList {
  list-style-type: none;
  padding: 0;
}

#videoList li {
  margin-bottom: 20px;
}

video {
  width: 100%;
  max-width: 600px;
}

3. JavaScript代码

最后，我们使用JavaScript来控制视频的播放和暂停。我们将为每个视频添加一个按钮，允许用户控制视频的播放。

document.addEventListener('DOMContentLoaded', function() {
  var videos = document.querySelectorAll('video');

  // 为每个视频添加播放和暂停按钮
  videos.forEach(function(video) {
    var playButton = document.createElement('button');
    playButton.textContent = '播放';
    playButton.onclick = function() {
      if (video.paused) {
        video.play();
        playButton.textContent = '暂停';
      } else {
        video.pause();
        playButton.textContent = '播放';
      }
    };

    var pauseButton = document.createElement('button');
    pauseButton.textContent = '暂停';
    pauseButton.onclick = function() {
      video.pause();
      playButton.textContent = '播放';
    };

    var container = document.createElement('div');
    container.appendChild(video);
    container.appendChild(playButton);
    container.appendChild(pauseButton);

    video.parentNode.insertBefore(container, video);
  });
});

这段代码首先等待文档加载完成，然后获取所有的视频元素。对于每个视频，我们创建两个按钮：一个用于播放，一个用于暂停。点击播放按钮将播放视频，并更新按钮文本为“暂停”。点击暂停按钮将暂停视频，并更新按钮文本为“播放”。

这样，我们就完成了一个简单的HTML5视频列表，并使用JavaScript来控制视频的播放和暂停。

-- 展开阅读全文 --