HTML 高级用法 音频与视频

1、基础用法

HTML 提供了 <audio> 和 <video> 元素，用于在网页中嵌入音频和视频文件。

1）<audio> 元素

<audio controls>
  <source src="audiofile.ogg" type="audio/ogg">
  <source src="audiofile.mp3" type="audio/mpeg">
  你的浏览器不支持 audio 元素。
</audio>

属性说明：

2）<video> 元素

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  你的浏览器不支持 video 标签。
</video>

属性说明：

2、自定义音频控件

可以使用<audio>元素，并利用JavaScript来添加自定义的播放、暂停按钮，音量控制等。

1）HTML

在HTML中添加<audio>元素，但不包括controls属性，因为我们要自定义控件。

<audio id="myAudio">
  <source src="audio_file.mp3" type="audio/mp3">
  您的浏览器不支持 audio 元素。
</audio>
<div>
  <button onclick="playAudio()">播放</button>
  <button onclick="pauseAudio()">暂停</button>
  <input type="range" id="volumeControl" min="0" max="1" step="0.01" onchange="changeVolume(this.value)" />
</div>

2）JavaScript

使用JavaScript添加播放、暂停功能和音量控制。

var myAudio = document.getElementById("myAudio");
var volumeControl = document.getElementById("volumeControl");
function playAudio() {
  myAudio.play();
}
function pauseAudio() {
  myAudio.pause();
}
function changeVolume(value) {
  myAudio.volume = value;
}

3、自定义视频控件

可以使用<video>元素，并利用JavaScript来添加自定义的播放、暂停按钮，音量控制等。

1）HTML

和音频类似，但使用<video>元素。

<video id="myVideo" width="320" height="240">
  <source src="movie_file.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>
<div>
  <button onclick="playVideo()">播放</button>
  <button onclick="pauseVideo()">暂停</button>
  <input type="range" id="volumeControlVideo" min="0" max="1" step="0.01" onchange="changeVolumeVideo(this.value)" />
</div>

2）JavaScript

和音频的控制方式相同，只是操作的对象从音频变为了视频。

var myVideo = document.getElementById("myVideo");
var volumeControlVideo = document.getElementById("volumeControlVideo");
function playVideo() {
  myVideo.play();
}
function pauseVideo() {
  myVideo.pause();
}
function changeVolumeVideo(value) {
  myVideo.volume = value;
}

4、多种来源和格式的支持

HTML中嵌入音频和视频时，为确保广泛的用户访问性，遵循一些关键实践非常重要。使用HTML5的<audio>和<video>标签，这两种标签支持在不需要额外插件的情况下直接在浏览器中播放媒体。由于不同浏览器对音频和视频格式的支持各不相同，提供多种格式的文件（例如MP3、WAV、OGG对于音频，MP4、WebM、OGG对于视频）可以增加兼容性。使用JavaScript可以动态选择来源，基于用户的位置或网络状况来优化播放体验。对于需要大规模分发的内容，使用媒体服务器或CDN服务可以提高分发效率。同时，采用媒体查询和响应式设计确保内容在各种设备上都能良好显示。为视频添加字幕或闭路字幕以提高可访问性，使用HTML5的<track>标签来实现。使用<source>元素可以为一个媒体文件指定多种格式，这样浏览器会选择第一个它能够播放的格式。这对于兼容不同浏览器的媒体播放是很有用的。

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  你的浏览器不支持内置的视频播放器。
</video>

5、使用Text Tracks添加字幕

对于视频内容的字幕、描述、章节或元数据。使用<track>标签时，需要将其作为<audio>或<video>标签的子元素来使用。字幕文件通常采用WebVTT格式（.vtt文件），其中包含时间码和对应的文本。要添加字幕，需要将<track>标签作为<audio>或<video>标签的子元素，并指定字幕文件的路径、字幕类型（如subtitles）、轨道的语言（使用srclang属性），以及为用户提供的轨道标签（通过label属性）。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <!-- 添加字幕轨道 -->
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
</video>

6、媒体APIs的高级特性

HTML中音频与视频媒体API提供了包括视频播放、音频处理、捕获媒体流在内的丰富功能。这些高级特性涵盖了从基础的播放控制（HTMLMediaElement API）、动态创建媒体流（Media Source Extensions, MSE）、直接在浏览器中操作音频数据（Web Audio API）、访问用户相机和麦克风（Media Capture and Streams API）到与系统媒体播放控制器交互（MediaSession API）、处理视频字幕（TextTrack API, WebVTT）、支持DRM保护内容播放（Encrypted Media Extensions, EME）以及实现视频画中画功能（Picture-in-Picture, PiP）。这些API不仅解决了特定需求，还为开发者提供了更多控制和创新可能，使得可以创建功能丰富、用户体验优秀的Web媒体应用。

7、性能和优化

HTML中嵌入音频和视频时，采取适当的性能优化措施至关重要。选择正确的文件格式，如针对视频使用H.264或VP9，对于音频则选用AAC或MP3，能有效减小文件大小而保持质量。通过使用工具压缩媒体文件来进一步降低其大小。

实施懒加载技术可以延迟非关键媒体的加载，直到用户将其滚动到视图中。将媒体内容托管在专用的媒体服务器或CDN上，可加速全球用户的访问速度。对关键媒体使用preload属性可实现预加载，但需注意避免过度使用以免消耗大量数据。自适应流技术如HLS或DASH对视频尤为重要，因为它们能根据用户的网络状态动态调整质量，以保证流畅播放。

尽管自动播放可能对某些体验至关重要，但通常应避免使用，以不干扰用户体验并节省数据。最后，定期使用如Google PageSpeed Insights、Lighthouse等工具监控网站性能，并根据反馈调整优化策略，是确保媒体内容对用户友好且性能高效的关键。通过这些方法，可以显著提高HTML中音频和视频的性能，确保用户享受到优质的媒体体验。