CSS学习30：多媒体标签（视频&音频）

视频标签- video

使用语法：

 <!-- 第一种写法 目前用的越来越多 -->
    <video src="./media/mi.mp4" autoplay="autoplay" muted controls width="100%" loop poster="./images/pink.jpg"></video>

注意，该标签不兼容ie9以下的浏览器 ，且在谷歌浏览器里自动播放视频，视频得默认静音(muted)

常用属性：

 

兼容写法

<!-- 第二种写法，提供多种视频格式，为了兼容性，但是现在用的次数较少 -->
    <video  controls="controls"  width="300">
        <!-- source 资源 来源 -->
        <source src="move.ogg" type="video/ogg" >
        <source src="move.mp4" type="video/mp4" >
        您的浏览器暂不支持 标签播放视频
    </video >

上面这种兼容写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本  

---

音频标签- audio

 使用语法：

<!-- 自动播放在谷歌中还是默认禁用的 -->
    <audio src="./media/music.mp3" controls autoplay loop></audio>

常用属性：

 兼容写法：

<audio controls="controls" >
        <source src="happy.mp3" type="audio/mpeg" >
        <source src="happy.ogg" type="audio/ogg" >
        您的浏览器暂不支持 <audio> 标签。
    </audio>