HTML媒体标签

折翼的恶魔2025-09-26 21:12

音频媒体标签（带控件功能）

html 复制代码

<!DOCTYPE html>
<html>
<body>
   <audio src="audio.mp3" autoplay controls>
      您的浏览器不支持音频标签
   </audio>
   <script type="text/javascript">
      document.querySelector('audio').addEventListener('play', function() {
         console.log('音频开始播放');
      });
   </script>
</body>
</html>

src 属性指定音频文件路径
autoplay 属性使音频加载后自动播放
controls 属性显示浏览器默认播放控件
标签内部可添加兼容性提示文本

视频媒体标签（带错误处理）

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
       video {
          width: 400px;
          background: #000;
       }
    </style>
</head>
<body>
   <video src="video.mp4" onerror="handleError()"></video>
   <script type="text/javascript">
      function handleError() {
         console.error('视频加载失败');
         alert('视频加载异常，请检查资源路径');
      }
   </script>
</body>
</html>

onerror 属性绑定错误处理函数
通过CSS设置视频播放器尺寸和背景色
JavaScript函数处理加载错误时的逻辑
错误处理包括控制台输出和用户提示

常用媒体标签属性

音频/视频通用属性：

autoplay：媒体自动播放
loop：循环播放
muted：静音状态
preload：预加载策略（auto/metadata/none）

视频专用属性：

poster：指定封面图片URL
width/height：设置显示尺寸
playsinline：移动端内联播放

事件监听：

onplay：媒体开始播放时触发
onpause：媒体暂停时触发
onended：播放结束时触发
ontimeupdate：播放位置改变时触发