HTML 暂停属性

HTML暂停属性（Pause Attributes）可以在音频和视频元素中定义跟踪和控制暂停事件的方式。它们允许开发者在播放媒体时暂停播放，同时显示一个暂停符号。暂停符号会在用户点击它之后消失并重新开始播放。暂停属性可以应用于<audio>、<video>和<track>元素。

视频/音频暂停

当用户点击媒体播放器的暂停按钮或空格键时，媒体播放器将暂停正在播放的视频或音频。暂停属性可用于自定义该按钮的位置和样式。

autoplay和controls

autoplay是一种布尔属性，如果设置为true（不区分大小写），则在该媒体元素被加载时自动开始播放。controls也是一种布尔属性，如果设置为true，则为媒体元素提供控件（如暂停、播放、音量和全屏模式）。

<video src="movie.mp4" autoplay controls>
Your browser does not support the video tag.
</video>
<audio src="song.mp3" autoplay controls>
Your browser does not support the audio element.
</audio>

poster

poster属性允许开发者设置在媒体没有被播放时呈现的图像。在媒体元素加载时，该图像将呈现在媒体元素的位置上，并在用户点击播放之前保持不变。

<video src="movie.mp4" poster="movie.jpg" controls>
Your browser does not support the video tag.
</video>

loop

设置loop属性为true，可以启用循环播放效果。

<video src="movie.mp4" poster="movie.jpg" loop>
Your browser does not support the video tag.
</video>

preload

preload属性设置媒体文件的缓存模式。默认情况下，媒体文件不会被缓存。preload可以设置为auto，这样在页面加载时就会开始下载媒体文件。preload还可以设置为metadata，这样仅会在页面加载时请求媒体文件的元数据。

<video src="movie.mp4" poster="movie.jpg" preload="auto" controls>
Your browser does not support the video tag.
</video>

track暂停

在某些情况下，开发者希望在曲目或字幕被暂停时出现暂停效果，track暂停属性就可以发挥作用。

kind属性

• subtitles: 这是一种用于显示音频和视频媒体标题文本的字幕曲目。
• captions: 这是一种描述视频内容的曲目，所描述的内容通常与视频本身相关。
• descriptions: 这是一种描述影片内容的文本曲目，适用于视觉上受到部分或全部限制的观众。
• chapters: 这是一种定位到视频或音频中部分章节的曲目。
• metadata: 这是一种仅包含元数据的曲目。通常情况下，这些曲目完全不可见。

<video controls>
  <source src="video.mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="subtitles_de.vtt" srclang="de" label="Deutsch">
</video>

default属性

default用于确定字幕曲目是否应该在媒体播放期间自动显示，还是需要用户手动单击字幕按钮才会显示。

<video controls>
  <source src="video.mp4">
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="subtitles_de.vtt" srclang="de" label="Deutsch">
</video>

总结

HTML暂停属性简单而强大，帮助开发者自定义播放器和调整用户媒体体验。对于需要更细粒度的控制，也可以通过JavaScript调用onpause事件来实现。