HTML-多媒体标签
来源:互联网 发布:linked in 知乎 编辑:程序博客网 时间:2024/05/17 09:15
video标签
video
标签的作用:播放视频。第一种格式:
<video src="" autoplay="autoplay"></video>
第一种格式中
video
标签的属性:src
属性用于高速video
标签需要播放的视频地址;autoplay
属性用于告诉video
标签是否需要自动播放视频;controls
属性用于告诉video
标签是否需要显示控制条;poster
属性用语告诉video
标签在视频没有播放之前显示的占位图片;loop
属性用于告诉video
标签在视频播放完毕之后是否循环播放,不能控制其播放进度暂停静音之类,一般用于广告;preload
属性用于预加载视频,要注意preload
属性与autoplay
属性相冲,若设置了autoplay
属性则preload
属性会失效;muted
属性用于静音;width
属性宽度;height
属性高度。
第二种格式:添加
source
<video preload="auto" controls="controls" poster="" loop="loop" muted="muted" width="" height=""></video>
由于视频数据非常重要,所以五大浏览器厂商都不愿支持别家的视频格式,从而导致了没有一种视频格式是所有浏览器都支持的,此时W3C未解决此问题,提出了第二种格式。
video
标签的是第二种格式存在的意义是:解决浏览器适配问题。video
元素支持三种视频格式,可以把这三种格式都通过source
标签指定给video
标签,以后当浏览器播放视频时就会从这三种中选择一种自己支持的格式来播放。
<video autoplay="autoplay" controls="controls" poster="" loop="loop" muted="muted" width="" height=""> <source src="" type="video/webm"> <source src="" type="video/mp4"> <source src="" type="video/ogg"></video>
- 注意:当前通过
video
标签的第二种格式虽然能够制定所有浏览器都支持的视频格式,但是有个条件,就是浏览器必须支持HTML5标签,否则同样无法播放。过去的一些浏览器并不支持HTML5标签,故未解决此问题,以后可以通过JS的框架html5media
来实现。
audio标签
audio
标签:用于播放音频。第一种格式:
<audio src="" autoplay="autoplay" controls="controls"></audio>
- 第二种格式:
<audio src="" autoplay="autoplay" controls="controls"> <source src="" type="audio/webm"> <source src="" type="audio/mp4"> <source src="" type="audio/ogg"></audio>
- 注意:
audio
标签的使用和video
标签的使用基本一样,video
中能够使用的属性在audio
标签中大部分都能够使用。只不过有三个属性在audio
中不能使用:height
,width
,poster
。
详情和概要标签
作用:利用
summary
标签来描述概要信息,利用datails
标签来描述详情信息。默认情况下是折叠只显示概要,想看见详情必须点击。格式:
<!--概要和详情标签--><details> <summary> 概要信息 </summary> 详情信息</details><!--示例--><details> <summary> 春哥的意思介绍 </summary> 相信很多年纪小的玩家不知道春哥是什么意思,其实这个说起来很简单,春哥指的是李宇春, 在超级女声选秀节目中走红全中国,但是因为中心化同时很有范,被粉丝们戏称春哥。 春哥当时又两句话被广为传颂,一句是“信春哥,得永生”、另一句则是“春哥纯爷们”, 当时随着游戏的火爆,DOTA以及后来英雄联盟的崛起,游戏中都会有复活道具, 通常道具名都会较为拗口,再加上永生和复活的相似。 机制的玩家便是把游戏中的复活道具戏称为“春哥”, 再到后来大火的英雄联盟,因此英雄联盟当中的复活甲被称为春哥、或者是春哥甲。</details>
应用示例:
marquee标签
作用:跑马灯效果。
注意:marquee标签不是W3C推荐的标签,在W3C官方文档中也无法查询这个标签,但是各大浏览器对这个标签的支持非常好。
- 格式:
<marquee></marquee>
属性:
—>direction:设置滚动方向。left、right、top、down。
—>scrollamount设置滚动速度,值越大越快。
—>loop设置滚动次数,默认是-1,即无限次滚动。
—>behavior设置滚动类型。slide滚动到边界就停止,alternate滚动到边界弹回,来回滚。代码示例:
<!--marquee标签,跑马灯效果--><marquee> 我是跑马灯,奔跑吧!小伙伴们!</marquee><!--direction设置滚动方向--><marquee direction="right"> 我是跑马灯,奔跑吧!小伙伴们!</marquee><marquee direction="up"> 我是跑马灯,奔跑吧!小伙伴们!</marquee><marquee direction="down"> 我是跑马灯,奔跑吧!小伙伴们!</marquee><!--scrollamount设置滚动速度--><marquee scrollamount="1"> 我是跑马灯,奔跑吧!小伙伴们!</marquee><marquee scrollamount="100"> 我是跑马灯,奔跑吧!小伙伴们!</marquee><!--loop设置滚动次数--><marquee loop="1"> 我是跑马灯,奔跑吧!小伙伴们!</marquee><!--behavior设置滚动类型,是否滚出去--><!--slide:滚到一边不动了;alternate滚到一边再滚回来--><marquee behavior="slide"> 我是跑马灯</marquee><marquee behavior="alternate"> 我是跑马灯</marquee><marquee behavior="alternate"> <img src="images/xd.png" width="70px" height="70px"></marquee>
- 效果图:
0 0
- html多媒体标签
- HTML-多媒体标签
- 关于HTML的多媒体标签
- HTML基础--多媒体标签 06
- Html中关于多媒体的标签
- HTML入门学习笔记--多媒体标签(6)
- html多媒体
- HTML多媒体
- html多媒体
- HTML----多媒体
- <html>多媒体
- HTML 多媒体
- HTML 多媒体
- 2、多媒体标签 embed
- 多媒体网页相关标签
- HTML多媒体标记
- HTML嵌入多媒体对象
- html多媒体页面
- Textiew常用设置
- 实现Python中xrange函数
- ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)
- UML用户指南第二版-读书笔记-第1章-为什么要建模
- 解决方法 Uncaught SyntaxError: Unexpected token < in JSON at position 0
- HTML-多媒体标签
- ABAP修改请求号
- 5 MATLAB参数估计与假设检验-参数估计
- 对IOC和DI的通俗理解
- java中数据库连接池框架c3p0和dbcp的区别
- IPC基础概念介绍
- 5个步骤学会Win2008 Server Core操作
- base64编码的作用 、为何使用base64编码、base64编码使用场景
- [5]Linux文件系统介绍与制作