2.如何使用原生 HTML5 做一个 Video 视频播放控件

书诚小驿2024/11/14前端知识库Html

如何使用原生 HTML5 做一个 Video 视频播放控件

html5

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Video 视频播放控件</title>
    <link rel="stylesheet" href="./test.css" />
  </head>
  <body>
    <div class="videoWrapper">
      <video id="videoA" controls>
        <source src="./test.mp4" type="video/mp4" />
        您的浏览器不支持 video 标签。
      </video>
    </div>
  </body>
</html>

Css 样式

video {
  outline: none;
  width: 920px;
  height: 530px;
  background-size: cover;
  background-position: center;
}

.videoWrapper {
  position: relative;
  display: inline-block;
}
最后更新时间' 2025/1/3 14:16:58