【温故而知新】HTML5的Video/Audio

发布时间:2024年01月17日

一、概念

HTML5是HTML的最新版本,它引入了许多新的元素和功能,以适应现代网页开发的需求。以下是HTML5的一些主要特点:

  1. 新增语义元素:HTML5引入了许多新的语义元素,如<header>、<footer>、<article>、<section>等,这些元素有助于提高网页的结构化和可访问性。
  2. 媒体支持:HTML5引入了<audio><video>元素,使得开发者可以在网页上直接嵌入音频和视频内容,而不需要依赖第三方插件。
  3. Canvas绘图:HTML5引入了<canvas>元素,使得开发者可以使用JavaScript在网页上绘制图形和动画。
  4. 语义化标签:HTML5的语义化标签使得网页的结构更加清晰和易于理解。例如,使用<nav>元素表示导航链接,使用<article>元素表示独立的内容等。
  5. 交互性:HTML5提供了更多的API和事件处理程序,使得开发者可以创建更加交互式的网页和应用。例如,拖放功能、文件上传和下载、地理定位等。
  6. 离线和存储:HTML5提供了离线存储和会话存储功能,使得开发者可以在用户的设备上存储数据,以便在离线时使用。
  7. 更好的表单控制:HTML5改进了表单元素和输入类型,使得表单的验证和输入更加方便和智能。

HTML5是一个非常强大的工具,它为开发者提供了更多的功能和灵活性,使得他们可以创建出更加丰富、交互性更强、功能更全面的网页和应用。

二、Video

HTML5中的元素可以用来在网页上嵌入视频。下面是一个基本的HTML5视频嵌入的案例代码:

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Video Example</title>
</head>
<body>
    <video controls width="640" height="360">
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
        Your browser does not support the video tag.
    </video>
</body>
</html>

在这个例子中,元素包含了两个元素,分别指定了视频文件的URL和MIME类型。如果浏览器支持其中的一个格式,就会使用该格式的视频文件进行播放。如果浏览器都不支持,则会显示出文字内容"Your browser does not support the video tag."。

另外,还可以通过设置元素的属性来控制视频的宽度、高度和控制条等。在上面的例子中,设置了width和height属性为640和360,表示视频的宽度和高度为640像素和360像素;设置了controls属性表示显示控制条。

注意,视频文件必须存储在服务器上,并且浏览器支持的视频格式可能有所不同,建议同时提供多个格式的视频文件,以便兼容不同的浏览器。

浏览器支持

各个浏览器下<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg

浏览器MP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYES
SafariYESNONO
OperaYES (从 Opera 25 起)YESYES

视频格式

格式MIME-type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

视频标签

标签描述
<video>定义一个视频
<source>定义多种媒体资源,比如 <video> 和<audio>
<track> 定义在媒体播放器文本轨迹

三、Audio

HTML5中的元素可以用来在网页上嵌入音频。下面是一个基本的HTML5音频嵌入的案例代码:

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio Example</title>
</head>
<body>
    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        <source src="audio.ogg" type="audio/ogg">
        Your browser does not support the audio tag.
    </audio>
</body>
</html>

在这个例子中,元素包含了两个元素,分别指定了音频文件的URL和MIME类型。如果浏览器支持其中的一个格式,就会使用该格式的音频文件进行播放。如果浏览器都不支持,则会显示出文字内容"Your browser does not support the audio tag."。

与元素类似,可以通过设置元素的属性来控制音频的展示和播放。在上面的例子中,设置了controls属性表示显示控制条。

同样地,音频文件也必须存储在服务器上,并且浏览器支持的音频格式可能有所不同,建议同时提供多个格式的音频文件,以便兼容不同的浏览器。

浏览器支持

各个浏览器下,<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg

浏览器MP3WavOgg
Internet Explorer 9+YESNONO
Chrome 6+YESYESYES
Firefox 3.6+YESYESYES
Safari 5+YESYESNO
Opera 10+YESYESYES

音频格式

FormatMIME-type
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

标签

标签描述
<audio>定义了声音内容
<source>规定了多媒体资源, 可以是多个,在 <video> 与 <audio>标签中使用
文章来源:https://blog.csdn.net/xuaner8786/article/details/135645485
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。