HTML媒体标签 - 指南

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

   
   <script type="text/javascript">
      document.querySelector('audio').addEventListener('play', function() {
         console.log('音频开始播放');
      });
   </script>

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

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

    
    


   
   <script type="text/javascript">
      function handleError() {
         console.error('视频加载失败');
         alert('视频加载异常，请检查资源路径');
      }
   </script>

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

常用媒体标签属性

音频/视频通用属性：

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

视频专用属性：

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

事件监听：

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