css 添加 mp4 视频 - CSS (1)

📌 相关文章

📜 css 添加 mp4 视频 - CSS (1)

📅 最后修改于: 2023-12-03 15:00:09.096000 🧑 作者: Mango

在CSS中添加MP4视频

你可以使用CSS在网页中添加动态、引人注目的MP4视频。以下是步骤和示例代码。

步骤

将视频文件(.mp4)上传到你的服务器或内容分发网络(CDN)。
在HTML文件中添加一个<video>标签，包括视频尺寸、控制器和文件路径。例如：

<video width="320" height="240" controls>
  <source src="http://example.com/mymovie.mp4" type="video/mp4">
</video>

在CSS文件中为<video>标签添加样式和动画效果。你可以使用CSS属性，如opacity、transform、transition来控制视频的显示和交互。例如：

video {
  opacity: 0.5;
  transform: rotate(10deg);
  transition: opacity 2s;
}
video:hover {
  opacity: 1;
  transform: scale(1.2);
}

示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>视频演示</title>
  <style>
    video {
      width: 50%;
      height: auto;
      display: block;
      margin: 0 auto;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
      border-radius: 5px;
    }
    video:hover {
      transform: scale(1.1);
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);
    }
  </style>
</head>
<body>
  <h1>这是一个演示视频</h1>
  <video controls>
    <source src="http://example.com/mymovie.mp4" type="video/mp4">
  </video>
</body>
</html>

这个示例演示了如何将一个MP4视频文件放在网页中，并在其上添加CSS样式。视频在鼠标悬停时会放大，而且带有阴影和圆角。这增强了用户体验，并吸引用户参与你的网站。