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

文章目录

  • 一、概念
  • 二、Video
    • 浏览器支持
    • 视频格式
    • 视频标签
  • 三、Audio
    • 浏览器支持
    • 音频格式
    • 标签

一、概念

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

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

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

二、Video

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

DOCTYPE html>
<html>
<head>
    <title>HTML5 Video Exampletitle>
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属性表示显示控制条。

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

浏览器支持

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

浏览器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES
Safari YES NO NO
Opera YES (从 Opera 25 起) YES YES

视频格式

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

视频标签

标签 描述
定义一个视频
定义多种媒体资源,比如
定义在媒体播放器文本轨迹

三、Audio

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

DOCTYPE html>
<html>
<head>
    <title>HTML5 Audio Exampletitle>
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属性表示显示控制条。

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

浏览器支持

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

浏览器 MP3 Wav Ogg
Internet Explorer 9+ YES NO NO
Chrome 6+ YES YES YES
Firefox 3.6+ YES YES YES
Safari 5+ YES YES NO
Opera 10+ YES YES YES

音频格式

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

标签

标签 描述
定义了声音内容
规定了多媒体资源, 可以是多个,在 标签中使用

你可能感兴趣的:(HTML/HTML5,html5,前端,html)