首页实验内容：插入视频为HTML5新增的特性，为了进一步掌握这一特性，接下来，带领大家制作一个视频播放小页面。练习目标： Ø 掌握视频的插入方法。 Ø 掌握CSS控制视频宽高的方法具体实现步骤如下： a) 为了使视频在页面居中显示，需在外部嵌套一层大盒子。 b) 通过video元素插入视频，并设置相关属性。

实验内容：插入视频为HTML5新增的特性，为了进一步掌握这一特性，接下来，带领大家制作一个视频播放小页面。练习目标： Ø 掌握视频的插入方法。 Ø 掌握CSS控制视频宽高的方法具体实现步骤如下： a) 为了使视频在页面居中显示，需在外部嵌套一层大盒子。 b) 通过video元素插入视频，并设置相关属性。

时间: 2024-02-24 21:55:26 浏览: 23

好的，下面是具体的实现步骤： 1. 首先创建一个 HTML 文件，并在其中添加一个大盒子的 div 元素。这个大盒子将用来包裹视频元素，使其在页面居中显示。 ```html <!DOCTYPE html> <html> <head> <title>视频播放小页面</title> <style> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } </style> </head> <body> <div class="container">  </div> </body> </html> ``` 2. 在这个大盒子中插入一个 video 元素，用来播放视频。设置视频的 src 属性为视频文件的 URL，设置 controls 属性为 true，以显示浏览器自带的视频控制面板。同时，可以设置视频的宽度和高度，也可以设置 autoplay 属性为 true，使视频自动播放。 ```html <div class="container"> <video src="video.mp4" controls width="640" height="360"></video> </div> ``` 3. 可以使用 CSS 来控制视频的宽度和高度，以及调整视频在页面中的位置。例如，可以将视频的宽度设置为 100%，使其占据整个大盒子的宽度；也可以将大盒子的高度设置为 100vh，使其占据整个视口的高度。 ```css .container { display: flex; justify-content: center; align-items: center; height: 100vh; } video { width: 100%; height: auto; } ``` 4. 最后，保存文件并在浏览器中打开 HTML 文件，就可以看到视频播放小页面了。可以使用浏览器自带的视频控制面板来控制视频的播放、暂停、音量等操作。以上就是制作视频播放小页面的具体实现步骤，希望能对您有所帮助。