HTML嵌入音视频无法正常播放 求助排查代码错误

原代码存在的核心问题 #

• 资源路径配置错误：id为media1的视频配置中，filename参数传入的Womanbuyingphone缺少.mp4文件后缀，浏览器无法定位到正确的媒体资源。
• MIME类型填写错误：id为media2的MP3音频配置中，MIME类型写为不存在的video/mp3，MP3格式的正确MIME类型为audio/mpeg（兼容写法可写audio/mp3），错误的MIME类型会导致浏览器无法匹配对应解码器。
• 用法与标签选型过时：<object>标签传filename参数是早期IE浏览器对接Windows Media Player插件的老旧写法，现代浏览器已经全面停止对这类NPAPI第三方插件的支持，且标准<object>标签本身需要通过data属性指定资源地址，仅靠内部<param>传值无法被现代浏览器识别为可播放的媒体资源。

修正后的可运行代码 #

<p>
  <!-- MP4视频 用原生video标签实现 -->
  <video id="media1" width="200" height="200" controls>
    <source src="Womanbuyingphone.mp4" type="video/mp4">
    当前浏览器不支持HTML5视频播放
  </video>
</p>

<p>
  <!-- MP3音频 用原生audio标签实现 -->
  <audio id="media2" controls>
    <source src="Linkinpark.mp3" type="audio/mpeg">
    当前浏览器不支持HTML5音频播放
  </audio>
</p>

修正说明 #

• 补全了MP4视频的文件后缀，确保资源路径和实际文件一致
• 替换为HTML5原生的<video>、<audio>标签，不需要依赖任何第三方插件，兼容所有现代浏览器
• 添加controls属性显示播放/暂停/进度条等原生控制栏
• 通过<source>标签明确指定资源地址和对应MIME类型，浏览器会自动调用内置解码器播放

内容的提问来源于stack exchange，提问作者Philip McLaughlin