HTML5是一种用于构建和呈现网页的标准，它提供了许多新的功能和特性，其中之一就是视频播放，通过使用HTML5，我们可以在网页上轻松地嵌入视频，而无需依赖第三方插件，如Adobe Flash，以下是如何使用HTML5在网页上观看视频的详细步骤：
1、准备视频文件
你需要一个视频文件，这个文件可以是MP4、WebM或Ogg格式的，这些格式都是HTML5支持的视频格式，你可以从网络上下载这些格式的视频，或者使用视频编辑软件将已有的视频转换为这些格式，确保你的视频文件与你的网页文件位于同一目录下，或者提供正确的路径。
2、编写HTML代码
接下来，你需要编写HTML代码来嵌入视频，在HTML中，可以使用<video>标签来嵌入视频，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>使用HTML5观看视频</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>在这里，你可以看到一段使用HTML5播放的视频。</p>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持HTML5视频播放。
</video>
</body>
</html>
在这个示例中，我们使用了<video>标签来创建一个视频播放器。width和height属性分别设置了视频播放器的宽度和高度。controls属性添加了播放、暂停和音量控制等控件。
<source>标签用于指定视频文件的来源，这里我们提供了两个来源：一个是MP4格式的视频文件（movie.mp4），另一个是Ogg格式的视频文件（movie.ogg），浏览器会按照它们的顺序尝试加载视频文件，直到找到一个可以播放的文件为止，如果浏览器不支持HTML5视频播放，那么将显示“您的浏览器不支持HTML5视频播放”这段文字。
3、保存并预览网页
将上述HTML代码保存为一个HTML文件，例如index.html，使用支持HTML5的浏览器（如Google Chrome、Mozilla Firefox或Safari）打开这个文件，你应该能看到一个带有播放控件的视频播放器，点击播放按钮即可观看视频。
4、自定义播放器样式和功能
HTML5的<video>标签提供了一些属性和方法，可以用来自定义播放器的样式和功能，以下是一些常用的属性和方法：
- poster属性：设置视频播放器的封面图片。
<video width="320" height="240" controls poster="movie_poster.jpg">
- autoplay属性：设置视频在页面加载时自动播放。
<video width="320" height="240" controls autoplay>
- loop属性：设置视频循环播放。
<video width="320" height="240" controls loop>
- preload属性：设置视频的预加载方式，可选值有none（不预加载）、metadata（仅预加载元数据）和auto（自动选择合适的预加载方式）。
<video width="320" height="240" controls preload="auto">
- play()方法：开始播放视频。
<script>
document.querySelector('video').play();
</script>
- pause()方法：暂停播放视频。
<script>
document.querySelector('video').pause();
</script>
- currentTime属性：获取或设置当前播放时间（以秒为单位）。
<script>
var video = document.querySelector('video');
video.currentTime = 10; // 跳转到第10秒处开始播放
</script>
通过使用这些属性和方法，你可以根据需要定制自己的视频播放器。