HTML5新增的多媒体标签

在网页中加入音乐

<audio></audio>

src 设置音乐文件名以及路径,<audio>标记支持MP3、WAV及OGG 3种音乐格式

autoplay：是否自动播放,加入autopaly属性表示自动播放

controls： 是否显示播放面板,加入controls属性表示显示播放面板

loop: 是否循环播放,加入loop属性表示循环播放。

preload：是否预先加载,减少用户等待时间。属性值有auto、metadata及none3种。当设置autoplay属性时,preload属性会被忽略。

auto：网页打开时就加载影音,为默认值

metadata：只加载meta信息

none：网页打开时不加载影音

width/height：设置播放面板的宽度和高度,单位为像素

type 指定播放类型,不需要让浏览器去检测文件格式,type必须指定适当的MIME类型,例如MP3对应到auto/mpeg,也可以在type中再增加codes属性参数,

更加明确地指定文件编码,例如：type="audio/ogg;code='vorbis'"。 当前, video 元素支持三种视频格式: Ogg MPEG 4 WebM

实例：

<audio controls="controls">
<source src="multimedia/music.ogg" type="audio/ogg"/>
<source src="multimedia/music.mp3" type="audio/mpeg"/>
您的浏览器不支持audio播放模式
</audio>

添加宽度

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>

添加影音动画

<video></video>

<video>标记支持3种影音格式：OGG(Thora编码)、MP4和WEBM(VP8编码)

<video>的属性与<audio>属性一致

实例：

<video controls="controls">
<source src="multimedia/butterfly.mp4" type="video/mp4"/>
<source src="multimedia/butterfly.mp4" type="video/mp4"/>
您的浏览器不支持此影音播放模式！
</video>

原文地址：https://blog.csdn.net/yuxingwu9872/article/details/137748066

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！