HTML5_视频播放

最新推荐文章于 2024-12-12 18:55:45 发布

原创最新推荐文章于 2024-12-12 18:55:45 发布 · 956 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了HTML5的<video>标签，重点介绍了其用于视频播放的关键属性，帮助理解如何在网页中实现流畅的多媒体体验。

<!DOCTYPE HTML>
<html>
<body>

<video width="320" height="240" controls="controls">
  <source src="#" type="video/ogg">
  <source src="#" type="video/mp4">
Your browser does not support the video tag.
</video>

</body>
</html>

<video></video>标签里属性controls是可控制进度条。（视频播放进度条）

src里为文件路径

Your browser does not support the video tag.
当浏览器不支持播放，会显示此内容

video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。例如本实例中的视频格式是ogg、mp4，浏览器会使用第一个可识别的格式。

<video> 标签的属性
 属性 值 描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的
 URL。
width pixels 设置视频播放器的宽度。

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。