当前位置：首页 > HTML

h5实现播放

2026-03-06 14:23:44HTML

使用HTML5实现音频播放

在HTML5中，可以通过<audio>标签实现音频播放功能。该标签支持多种音频格式（如MP3、WAV、OGG），并提供控制属性。

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

controls属性显示默认播放控件（播放/暂停、进度条、音量等）。<source>标签指定音频文件路径和类型，后备文本在浏览器不支持时显示。

自定义播放器样式与功能

若需自定义播放器界面，可通过JavaScript控制<audio>元素的API：

<audio id="customAudio" src="audio.mp3"></audio>
<button onclick="document.getElementById('customAudio').play()">播放</button>
<button onclick="document.getElementById('customAudio').pause()">暂停</button>

通过play()和pause()方法控制播放状态，结合CSS可完全自定义控件样式。

h5实现播放

实现视频播放

视频播放使用<video>标签，结构与<audio>类似：

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持视频播放。
</video>

支持autoplay（自动播放）、loop（循环）、muted（静音）等属性。JavaScript控制方式与音频一致。

响应式设计

通过CSS确保播放器适应不同屏幕尺寸：

h5实现播放

video, audio {
  max-width: 100%;
  height: auto;
}

跨浏览器兼容性

不同浏览器支持的格式可能不同，建议提供多个格式源：

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

优先检测WebM格式，若不支持则回退到MP4。

高级功能扩展

结合MediaElement.js等库可增强兼容性与功能：

<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css">
<video src="video.mp4" class="mejs__player"></video>
<script>
  new MediaElementPlayer('video');
</script>

该方案提供统一UI并解决旧浏览器兼容问题。

分享给朋友：