HTML 怎么引用视频
在 HTML 中，我们可以使用 <video> 标签来嵌入视频。<video> 标签是一个多媒体元素，它可以播放音频和视频文件，下面是一些关于如何在 HTML 中引用视频的基本知识。
1、使用 <video> 标签
要使用 <video> 标签，首先需要在 HTML 文件中插入以下代码：
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video>
width 和 height 属性分别设置视频的宽度和高度，controls 属性表示显示视频控制器(播放、暂停、音量等),<source> 标签用于指定不同的视频格式，如果浏览器不支持 <video> 标签或指定的视频格式，将显示 "您的浏览器不支持 HTML5 video 标签。" 这句话。
2、设置视频源
在上面的代码中，我们使用了两个 <source> 标签来指定不同的视频格式，第一个 <source> 标签的 src 属性设置为 "movie.mp4",表示使用 MP4 格式的视频文件，第二个 <source> 标签的 src 属性设置为 "movie.ogg",表示使用 OGG 格式的视频文件，这样做的好处是，如果用户的浏览器支持其中一种格式，那么就可以直接播放该格式的视频，而不需要等待其他格式的视频加载完成。
需要注意的是，为了保证最佳的兼容性，建议同时提供多种不同格式的视频文件，可以将 MP4 格式的视频文件命名为 "movie.mp4",将 OGG 格式的视频文件命名为 "movie.ogg",以便浏览器能够自动选择合适的格式进行播放。
3、添加标题和描述
为了让用户更容易理解视频的内容，可以在 <video> 标签内添加标题和描述，可以使用 <figcaption> 标签来实现这一点：
<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <figcaption>这是一个示例视频</figcaption> 您的浏览器不支持 HTML5 video 标签。 </video>
在这个例子中，我们在 <video> 标签内添加了一个 <figcaption> 标签，并在其中设置了标题 "这是一个示例视频"，这样，当用户将鼠标悬停在视频上时，就可以看到这个标题。
4、调整播放器外观
默认情况下，<video> 标签会生成一个简单的播放器界面，如果想要调整播放器的外观，可以使用 CSS 对 <video> 标签进行样式设计，可以设置播放器的大小、背景颜色等：
<!DOCTYPE html>
<html>
<head>
<style>
video::-webkit-media-controls-enclosure {
border: 1px solid ddd;
}
</style>
</head>
<body>
<video width="320" height="240" controls style="background-color: lightgrey;">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<p class="vjs-no-js">要查看此视频，请启用 JavaScript,并考虑升级到支持 HTML5 视频的 Web 浏览器。</p>
</video>
</body>
</html>
在这个例子中，我们使用了内联样式 style="background-color: lightgrey;" 来设置播放器的背景颜色为浅灰色，我们还使用了一个类名为 "vjs-no-js" 的样式来显示一条提示信息，告诉用户需要启用 JavaScript 以及升级到支持 HTML5 视频的 Web 浏览器。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/215999.html
微信扫一扫 