前言
HTML5为我们提供了一种更简单、更有效的方式来展示视频。HTML5的新视频标签提供了一种简洁的方法，在不需要特殊插件的情况下，为我们呈现视频。实际上，这使得网站上的视频内容更易于访问，并使我们的网站更加现代化。接下来，我将向您展示如何使用HTML5在网页中嵌入视频。
嵌入视频
HTML5 中，可以使用 <video> 标签生成视频播放器。这个标签有一些属性可以控制视频播放器的外观和行为。下面的代码为您展示如何添加视频并控制它的大小。
这段代码将生成一个带有320像素宽度和240像素高度的播放器，并显示 movie.mp4 和 movie.ogg 这两个视频文件的链接。如果浏览器不支持该视频格式，则会显示 Your browser does not support the video tag.消息。
使用Javascript控制
我们可以使用JavaScript来控制视频的播放。下面的代码展示了如何使用JavaScript在网页加载时自动启动视频播放，并在点击按钮时暂停或恢复视频播放。
这里，我们为 <video> 标签添加了ID。我们还添加了一个按钮，按钮点击会运行 playPause() 方法，这个方法使用了JS获取视频元素，然后检查目前是否暂停，如果已暂停就开始播放，否则就暂停。
响应式设计
在现代网站中，要保持页面设计的一致性，需要在所有设备上都呈现出最佳外观。您可以使用CSS使您的视频集成到响应式设计中。下面的代码为您展示如何将视频自适应各种设备宽度。
这段CSS代码创建了一个响应式设计容器，备受赞誉的技术魔术是留下适当空间，用一个底部内边距，同时减少额外的顶部内边距，削减空间。这里使用了 padding-bottom 属性，为视频提供了一个百分比尺寸，这个尺寸可自动适应屏幕大小。video-container div用于包装视频元素和类。
总结
在您的网页上添加视频，使用HTML5是一种流行的、简单的方式，它既便宜又简单。要添加视频，您仅需创建一个 <video> 标签，并将视频文件链接添加到该标记的源属性中。 如果您想使用JavaScript控制视频，则可以使用play() 和 pause() 方法。 最后，如果您想创建响应式网页，则需要使用CSS。使用上述方法可以轻松地使视频嵌入网页，而无需依赖Flash和其他插件。
