一邻寿、多媒體音頻標簽audio 標簽說明
- 目前支持三種格式
audio.png
- audio 的參數(shù)
audiocanshu.png
- audio 代碼演示
<body>
<!-- 注意:在 chrome 瀏覽器中已經(jīng)禁用了 autoplay 屬性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
<!--
因為不同瀏覽器支持不同的格式,所以我們采取的方案是這個音頻準備多個文件
-->
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
<source src="./media/snow.ogg" type="audio/ogg" />
你的瀏覽器太low了绽快,不支持audio播放
</audio>
</body>
二碱屁、多媒體視頻標簽video 視頻標簽
- 目前支持三種格式
vedio.png
- 語法格式
<video src="./media/video.mp4" controls="controls"></video>
- video 參數(shù)
videocanshu.png
- video 代碼演示
<body>
<!-- <video src="./media/video.mp4" controls="controls"></video> -->
<!-- 谷歌瀏覽器禁用了自動播放功能,如果想自動播放堤如,需要添加 muted 屬性 -->
<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
<source src="./media/video.mp4" type="video/mp4">
<source src="./media/video.ogg" type="video/ogg">
</video>
</body>
-
多媒體標簽總結(jié)
- 音頻標簽與視頻標簽使用基本一致
- 多媒體標簽在不同瀏覽器下情況不同蒲列,存在兼容性問題
- 谷歌瀏覽器把音頻和視頻標簽的自動播放都禁止了
- 谷歌瀏覽器中視頻添加 muted 標簽可以自己播放
- 注意:重點記住使用方法以及自動播放即可窒朋,其他屬性可以在使用時查找對應的手冊