简单搭建网站
从零开始学习

html音频和视频

学会插入音频和视频在网页中,可以让你网页更加生动,比如碰到自己喜欢的音乐想分享给大家,用视频也比图片更加有说服力,本文用的标签是html5中的标签,因为html5之前的版本需要用户本身安装有flash插件才能展示给大家,但是html5中的插件不需要任何插件,比较方便

还不了解html是什么的可以先看下面文章了解一下

html音频

音频由<audio controls>标签定义

下面是浏览器支持的音频格式

浏览器mp3oggwav
IE9+支持不支持不支持
Chrome 6+支持支持支持
Firefox 3.6+支持支持支持
Safari 5+支持不支持支持
Opera 10+支持支持支持

下面是各音频的type属性

名称type属性
mp3audio/mpeg
wavaudio/wav
oggaudio/ogg
#插入MP3类型音频音频#
<audio controls>
<source src="音频路径" type="audeo/mpeg">
sorry,你的浏览器不支持audio标签
</audio>

audio标签示例

提示:你可以先修改部分代码再运行。

html视频

html视频由<video controls>定义并且可以用width和height调整宽和高

下面为浏览器支持的视频格式

浏览器mp4webmogg
IE支持不支持不支持
Chrome支持支持支持
Firefox支持支持支持
Safari支持不支持不支持
Opera支持支持支持
#插入mp4类型视频#
<video width="400" height="320" controls>
<source src="视频路径" type="video/mp4">
</video>

下面是各视频类型的type属性

名称type属性
mp4video/mp4
webmvideo/webm
oggvideo/ogg

video标签示例

提示:你可以先修改部分代码再运行。

你可以准备多种类型不同的音频或者视频用source写上,浏览器会从第一个资源开始,如果支持这种类型的格式就会直接播放,多种类型用于补缺有些类型浏览器不支持,但是主流的mp4和mp3格式的多媒体资源浏览器都是支持的

赞(1) 打赏梁某人
未经允许不得转载:每篇文章都是博主的心血,偷盗文章事最可耻的事情梁某人的个人网站 » html音频和视频

发表评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

梁某人的个人网站

免费云存储免费云存储

靓仔!打赏一元试试看啊

支付宝扫一扫打赏

微信扫一扫打赏