HTML多媒体元素

音频和视频

嵌入音频和视频：<audio> 和 <video> 标签

嵌入音频：<audio> 标签

在HTML中，<audio> 标签用于嵌入音频文件，使网页能够播放声音。与<img>标签类似，<audio> 标签是一个容器，它可以包含音频文件的多个来源，以确保兼容性。

基本用法：

<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    <source src="audio-file.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>

• controls 属性：添加controls属性后，浏览器会显示播放、暂停、音量控制等基本控制界面。
• <source> 标签：允许你指定多个音频格式的文件，浏览器会选择第一个能够播放的文件格式。
• 回退文本：如果浏览器不支持<audio>标签，将显示回退文本，告知用户无法播放音频。

音频的属性

• src 属性：直接指定音频文件路径（也可使用<source>标签）。
• autoplay 属性：页面加载时自动播放音频。
• loop 属性：音频播放结束后自动重新播放。
• muted 属性：默认静音播放音频。
• preload 属性：指定音频的预加载行为，值包括auto（自动预加载）、metadata（仅预加载元数据）、none（不预加载）。

元数据指视频的时长，尺寸等，但不包括实际的音视频内容

<audio src="audio-file.mp3" controls autoplay loop muted preload="auto"></audio>

嵌入视频：<video> 标签

与<audio>标签类似，<video> 标签用于在网页中嵌入视频内容。<video>标签同样可以包含多个视频文件的来源，以确保不同浏览器的兼容性。

基本用法：

<video controls>
    <source src="video-file.mp4" type="video/mp4">
    <source src="video-file.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>

• controls 属性：与<audio>标签相似，controls属性使浏览器显示播放、暂停、进度条、音量等控制功能。
• <source> 标签：提供不同格式的视频文件，以确保兼容性。
• 回退文本：如果浏览器不支持<video>标签，将显示回退文本，告知用户无法播放视频。

视频的属性

• src 属性：直接指定视频文件路径（也可使用<source>标签）。
• width 和 height 属性：设置视频的宽度和高度，通常使用像素值。
• poster 属性：指定视频加载前或未加载时显示的占位图像。
• autoplay 属性：页面加载时自动播放视频。
• loop 属性：视频播放结束后自动重新播放。
• muted 属性：默认静音播放视频。
• preload 属性：指定视频的预加载行为，值包括auto、metadata、none。

<video src="video-file.mp4" width="640" height="360" controls autoplay loop muted poster="poster-image.jpg" preload="auto"></video>

常见的多媒体格式和兼容性

音频格式

• MP3（audio/mpeg）：最广泛支持的音频格式，兼容几乎所有现代浏览器。
• Ogg Vorbis（audio/ogg）：开源音频格式，具有良好的压缩效果，兼容性较好。
• WAV（audio/wav）：无损音频格式，适合需要高音质的场景，但文件较大。

视频格式

• MP4（video/mp4）：使用H.264视频编解码器和AAC音频编解码器，广泛支持，是最常见的视频格式。
• WebM（video/webm）：开源视频格式，适合HTML5视频流，使用VP8/VP9编解码器，较新浏览器兼容。
• Ogg Theora（video/ogg）：较少使用的开源视频格式，支持的浏览器较少。

浏览器兼容性

为了确保音频和视频内容能够在所有浏览器中正常播放，通常需要提供多种格式的音频和视频文件，并在<audio>和<video>标签中使用多个<source>标签指定这些格式。

示例：

<audio controls>
    <source src="audio-file.mp3" type="audio/mpeg">
    <source src="audio-file.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>

<video controls>
    <source src="video-file.mp4" type="video/mp4">
    <source src="video-file.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>

嵌入其他媒体

插入YouTube视频

---

打开想要分享的视频页面之后，点击分享。

在给出的分享选项中，选择嵌入。

YouTube会生成一段带有<iframe>标签的代码，复制该代码。

对于这段代码中的属性：

width与height：宽高，可以自主调节

src ：内容来源

frameborder：表示内嵌框架的边框。

allow ：控制iframe中可以使用的功能，一般包括自动播放（autoplay）、加速计（accelerometer）、剪贴板写入（clipboard-write）、加密媒体（encrypted-media）、陀螺仪（gyroscope）和画中画（picture-in-picture）。

allowfullscreen：允许用户全屏播放。

使用 <iframe> 标签嵌入外部网页内容

---

<iframe> 标签（内联框架）允许在网页中嵌入另一个网页或外部内容。

这使得我们可以在网页的一个部分显示来自其他来源的内容，而无需将这些内容直接存储在服务器上。

常见的使用场景包括嵌入视频、地图、社交媒体小部件、外部网页等

基本语法

<iframe src="https://www.example.com" width="600" height="400" frameborder="0" allowfullscreen></iframe>

• src 属性：指定要嵌入的网页或内容的URL。这个URL可以是任何有效的网页地址。
• width 和 height：指定<iframe>的宽度和高度。可以使用像素（px）或者百分比（%）作为单位。
• frameborder 属性：控制是否显示<iframe>的边框。0表示没有边框，1表示有边框（通常默认有边框）。
• allowfullscreen 属性：允许<iframe>中的内容在全屏模式下显示。如果嵌入的内容支持全屏显示（例如视频播放器），该属性将启用全屏功能。