怎么使用h5新增的audio与video标签

# 怎么使用HTML5新增的audio与video标签

## 一、前言

随着HTML5标准的普及，网页多媒体能力得到显著增强。其中`<audio>`和`<video>`标签的引入彻底改变了传统依赖Flash等插件的多媒体播放方式。本文将全面解析这两个标签的使用方法、属性配置、API控制以及实际应用场景。

## 二、audio标签详解

### 2.1 基本语法

```html
<audio src="audio.mp3" controls></audio>

2.2 核心属性

2.3 多源文件支持

<audio controls>
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持audio标签
</audio>

2.4 JavaScript控制示例

const audio = document.querySelector('audio');

// 播放/暂停切换
function togglePlay() {
  audio.paused ? audio.play() : audio.pause();
}

// 音量控制
audio.volume = 0.5; // 范围0-1

// 进度跳转
audio.currentTime = 30; // 跳转到30秒

三、video标签详解

3.1 基本语法

<video src="video.mp4" width="640" controls></video>

3.2 扩展属性

3.3 多源文件支持

<video width="640" controls poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  您的浏览器不支持video标签
</video>

3.4 全屏控制示例

const video = document.querySelector('video');

// 进入全屏
function requestFullscreen() {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  }
}

// 检测全屏状态
document.addEventListener('fullscreenchange', () => {
  console.log(!!document.fullscreenElement);
});

四、通用媒体API

4.1 事件监听

const media = document.querySelector('audio, video');

media.addEventListener('timeupdate', () => {
  console.log(`当前进度: ${media.currentTime}`);
});

media.addEventListener('ended', () => {
  console.log('播放结束');
});

4.2 自定义控制面板

<div class="custom-player">
  <video src="video.mp4"></video>
  <div class="controls">
    <button class="play-btn">▶</button>
    <input type="range" class="progress" max="100">
    <span class="time">00:00</span>
  </div>
</div>

<script>
  const video = document.querySelector('video');
  const playBtn = document.querySelector('.play-btn');
  const progress = document.querySelector('.progress');
  
  playBtn.addEventListener('click', () => {
    video.paused ? video.play() : video.pause();
  });
  
  video.addEventListener('timeupdate', () => {
    progress.value = (video.currentTime / video.duration) * 100;
  });
</script>

五、高级应用技巧

5.1 媒体片段播放

<video controls>
  <source src="video.mp4#t=10,20" type="video/mp4">
</video>
<!-- 播放10-20秒片段 -->

5.2 画中画模式

// 进入画中画模式
video.requestPictureInPicture();

// 退出画中画
document.exitPictureInPicture();

5.3 媒体捕获

<video autoplay></video>

<script>
  navigator.mediaDevices.getUserMedia({ video: true })
    .then(stream => {
      document.querySelector('video').srcObject = stream;
    });
</script>

六、兼容性处理方案

6.1 特征检测

function canPlayType(type) {
  const audio = document.createElement('audio');
  return !!audio.canPlayType(type);
}

console.log(canPlayType('audio/ogg')); // "maybe" 或 "probably"

6.2 备用方案

<video controls>
  <source src="video.mp4" type="video/mp4">
  <!-- Flash备用 -->
  <object type="application/x-shockwave-flash">
    <param name="movie" value="player.swf">
  </object>
</video>

七、性能优化建议

1. 预加载策略：根据场景选择preload="metadata"
2. 懒加载：使用loading="lazy"属性
3. 响应式设计：

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

4. 格式选择：优先使用WebM等高效格式

八、安全注意事项

1. 用户交互后才能触发自动播放
2. 跨域资源需要CORS配置
3. 移动端注意流量消耗问题

九、结语

HTML5媒体标签为现代Web开发提供了强大的多媒体支持。通过合理使用这些标签及其API，开发者可以创建丰富的媒体体验，同时保证性能和兼容性。随着WebCodecs等新标准的出现，未来网页多媒体能力还将继续增强。

附录：常用MIME类型对照表

”`

注：本文约3250字，实际字数可能因排版略有差异。完整实现时需要补充具体代码示例的CSS样式和更详细的兼容性处理方案。