HTML5媒体播放详解-CSDN博客

本文链接：https://blog.csdn.net/Yu_csdnstory/article/details/89406991

本文介绍了HTML5中<audio>和<video>标签用于音频和视频播放的基本语法和属性，如src、controls、loop、preload和autoplay。同时，讨论了不同浏览器对controls属性的支持差异，以及如何处理媒体播放错误，包括Mediaerror对象的code属性和network State属性的四种状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

音频的播放

用"audio"标签实现对音频的控制

<audio src="http://www.ytmp3.cn/down/44456.mp3" controls="controls" align="center">
</audio>
<h5>半城烟沙</h5>
<audio src="2.mp3" controls="controls">
</audio>
</audio>
<h5>樱花草</h5>
<audio src="yinyue/1.mp3" controls="controls" loop="loop">
</audio>

它有src,controls,loop,perload，autoplay等属性

src是audio的必须的一个属性，写音乐的地址
controls 是audio的一个重要属性，它有暂停，进度条等功能，其中谷歌浏览器的controls支持下载，不支持音量的调度，而火狐浏览器支持音量调节不支持下载
loop属性是是否设置循环，有了loop属性，这个音频将循环播放
autoplay属性只媒体加载完成后自动播放
perload指的是预加载，none，metadata，auto分别是属性的三个选项，none不进行预加载，metadata只加载元字节，auto则全部加载

视频的播放：

用"video"标签对视频进行控制

与audio相同的是，audio的属性video都有

<video width="500"higth="400" src="http://edge.ivideo.sina.com.cn/212550342.mp4?KID=sina,viask&Expires=1555776000&ssig=bkhlo665%2Bx"controls="controls"poster="images/1.jpg">
</video>

错误信息的erro属性：
在视频或音频发生播放错误时，会发送一个Mediaerror对象，该对象对应的code属性返回对应的属性错误码，其可能值为：

MeDIA_ERR_ABORTED(数值1）下载过程中用户操作原因终止
MEDIA_ERR_NETWORE(数值2）媒体资源可用，下载过程中网络错误
MWDIA_ERR_DECODE(数值3 媒体资源可用，但是解码时错误
MWDIA_ERR_SRC_NOT_SUPPORTED(数值4）媒体资源不可用，或者不支持格式
读取错误状态的代码如下；

<srcipt>
	var video=document.getElemenetById("video Element");
	video.addEventListener("error",function ()
        {
          var error=video.eror;
          switch(error.code)
          {
              case 1:
                  alert("视频的下载被操作终止");
                  break;
              case 2:
                  alert("网络故障，视频下载终止");
                  break;
              case 3:
              {
                  alert("解码错误");
                  break;
              }
              case 4:
              {
                  alert("不支持此类格式，视频出错");
                  break;
              }
              default:
              {
                  alert("发生未知错误");
              }
          }
        },false);
    </script>

network State属性
用于检测加载过程中的网络状态，不常用，并不详细介绍