前端Html5（2）之多媒体音频视频标签

  html5协议的发布使得视频和音频的播放可以不依赖于flash插件，而是通过html5定义的新标签<audio>和<video>来在网页上播放视频和音频。

音频

<main>
    <audio src='像我这样的人.mp3' controls autoplay loop>
    </audio>

    <audio controls autoplay loop muted>
        <source src="平凡的一天.mp4">
        <source src="平凡的一天.wav">
        您的浏览器不支持 audio 标签。
    </audio>
</main>
复制代码

audio标签常用的属性有：
controls：表示出音频控件，每个浏览器样式不同。
autoplay：自动播放。
loop：循环播放。
muted：静音。
  在chrome浏览器中，音频控件有暂停/播放健，进度条，时间和音量展示。不支持autoplay，它只在首次进去页面是有效果，刷新页面不能自动播放，支持loop，支持muted，音量键可以恢复声音。

  在火狐浏览器中，音频控件有暂停/播放健，进度条，时间和音量展示。支持autoplay，支持loop，支持muted，音量键可以恢复声音。

  在safari浏览器中，音频控件有暂停/播放健，进度条，时间。不支持autoplay，支持loop，支持muted，但没有音量键，因此在浏览器中不能修改音量。

  source标签允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。若不支持，可以显示提示信息。

视频

<main>
    <video src="第01课 Vue第一天-Vue基础的使用-01.mp4" autoplay controls loop width="500px" height="500px"></video>
</main>
复制代码

video常用属性：
controls：表示出视频控件，每个浏览器样式不同。
autoplay：自动播放。
loop：循环播放。
width：设置视频控件的宽度。
length：设置视频控件的长度。
  在chrome浏览器中，视频控件有暂停/播放健，进度条，时间，音量展示，全屏和下载。不支持autoplay，它只在首次进去页面是有效果，刷新页面不能自动播放，支持loop。 单击视频界面不会暂停播放，双击可以全屏。

  在火狐浏览器中，视频控件有暂停/播放健，进度条，时间，音量展示，全屏。支持autoplay，支持loop。 单击视频界面会暂停播放，双击可以全屏。

  在safari浏览器中，视频控件有暂停/播放健，进度条，快进，时间，音量展示，全屏。不支持autoplay，支持loop。 单击视频界面会暂停播放，双击不可以全屏。