HTML5新增的多媒体标签

ops/2024/12/22 11:25:26/
htmledit_views">

在网页中加入音乐

<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>

http://www.ppmy.cn/ops/1829.html

相关文章

比特币叙事大转向

作者&#xff1a;David Lawant 编译&#xff1a;秦晋 要理比特币解减半动态&#xff0c;最关键的图表是下面这张&#xff0c;而不是价格图表。它显示了自 2012 年以来&#xff0c;矿业总收入与比特币现货交易量的比例&#xff0c;并标注了三个减半日期。 虽然矿工仍然是比特币生…

租用境外服务器,越南服务器的优势有哪些

自从中国加入世界贸易组织之后&#xff0c;国内经济增加速度非常快&#xff0c;同时越来越多的人选择去东南亚国家发展&#xff0c;因为当地的中国人很多&#xff0c;所以中国企业在当地面临着更小的文化差异。东南亚地区也是最新的经济体&#xff0c;互联网正处于蓬勃发展的阶…

Matlab方程组拟合【案例源码+视频教程】

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《复杂函数拟合案例分享》本专栏旨在提供 1.以案例的形式讲解各类复杂函数拟合的程序实现方法&#xff0c;并提供所有案例完整源码&#xff1b;2.…

ElasticSearch(ES)语法关键词

文章目录 第一级关键词第二级关键词query使用highlight使用settings使用 第三级关键词boolanalysis使用 其他参考文档 第一级关键词 query&#xff1a;查询条件from&#xff1a;分页偏移量size&#xff1a;分页数量sort&#xff1a;排序_source&#xff1a;选择需要的字段aggs…

pytorch 今日小知识1——torch.set_printoptions

torch.set_printoptions torch.set_printoptions(precisionNone, thresholdNone, edgeitemsNone, linewidthNone, profileNone, sci_modeNone)这个方法是来修改pytorch中的打印选项的&#xff08;其实就是和numpy中更改打印方法一样&#xff09;&#xff0c;就是使用print打印…

“好”玩游戏让我本能痴迷游戏编程

源地址&#xff1a;https://www.ctvol.com/c-cdevelopment/5842.html 我的游戏生涯是从最开始的热血传奇开始的&#xff0c;那时候&#xff0c;我们年少轻狂&#xff0c;不知道多少80后的青春都洒在了这个游戏上面&#xff0c;那时候&#xff0c;热血传奇的热度比现在的英雄联…

kafka快速入门+应用

Kafka, 构建TB级异步消息系统 0.mq优劣 优点&#xff1a;应用解耦、异步提速、削峰填谷 缺点&#xff1a;系统可用性降低、系统复杂度提高、一致性问题 mq特点&#xff1a;消息不丢失、支持消息存储 1.快速入门 1.1 阻塞队列 在生产线程 和 消费线程 之间起到了 &#xff…

SpringSecurity集成JWT

使用 Spring Security 集成 JWT&#xff08;JSON Web Token&#xff09;身份验证是一种常见的方式来实现基于令牌的身份验证。在 Spring Boot 应用程序中使用 Spring Security 和 JWT&#xff0c;可以创建一个安全、可扩展的身份验证系统。下面是一个示例&#xff0c;展示如何在…