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>
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)