用html5跟css做一个视频播放器1.界面美观 2.熟练应用video,eabed

HTML5 和 CSS 可以配合创建一个基础的视频播放器，下面是一个简单的步骤和设计要点：

1. **界面设计**：
- 使用HTML5 的`<video>` 标签来嵌入视频资源。这个标签有多种属性如`src`、`controls`等，`controls`使得浏览器自动添加播放/暂停按钮等控件。
- 使用CSS美化外观：
- 给`<video>`元素设置合适的宽高，可以使用百分比或者绝对像素值。
- 通过`:hover`伪类，为播放按钮增加悬停效果和视觉反馈。
- 使用背景颜色、边框和圆角来提升整体样式。
- 制作一个封面图片`<img>`，当视频加载失败时显示。

<div class="video-player">
  <img src="thumbnail.jpg" alt="Video Preview">
  <video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

<style>
.video-player {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}
.video-player video,
.video-player img {
  display: block;
  width: 100%;
}
</style>

2. **熟练应用**: `eabed`看起来像是打错了，可能是`embed`。在HTML5时代，`<video>`是首选，但如果需要其他格式的支持（如Flash），可以在老版浏览器上考虑使用`<embed>`。但在现代浏览器中，`<video>`通常就足够了。

<!-- 对于旧版浏览器兼容，可能会使用 -->
<!--[if lt IE 9]>
<embed src="video.swf" type="application/x-shockwave-flash" />
<![endif]