HTML5新增的多媒体标签

最新推荐文章于 2024-10-05 09:05:35 发布

yuxingwu9872

最新推荐文章于 2024-10-05 09:05:35 发布

阅读量435

点赞数 5

文章标签： html5 前端 html

本文链接：https://blog.csdn.net/yuxingwu9872/article/details/137748066

版权

本文详细介绍了如何在HTML中使用audio和video标签插入音频和视频，包括src、autoplay、controls、loop、preload等属性的用法，以及不同格式的支持和示例代码。

摘要由CSDN通过智能技术生成

在网页中加入音乐

<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>标记支持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>