06.HTMl基础-多媒体标签吖

video标签、audio标签、详情概要标签

video标签

• 作用：播放视频
• 格式：<video src=""></video>

scr	告诉video标签需要播放的视频地址
autoplay	告诉video标签是否需要自动播放视频
controls	告诉video标签是否需要显示控制条
poster	告诉video标签视频没有播放之前显示的占位图片
loop	告诉video标签循环播放视频. 一般用于做广告视频
preload	告诉video标签预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效
muted	告诉video标签视频静音
width/height	这个...还是提一下哈

## video标签第二种格式

1.格式:

<video>
    <source src="" type=""></source>
    <source src="" type=""></source>
</video>

2.第二种格式存在的意义:

• 由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的，这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
• video标签的第二种格式存在的意义就是为了解决浏览器适配问题
  video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放~

3.注意点:

• 当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放

eg：

<video autoplay="autoplay" controls="controls">
    <source src="images/sbo.webm" type="video/webm"></source>
    <source src="images/sbo.mp4" type="video/mp4"></source>
    <source src="images/sbo.ogg" type="video/ogg"></source>
</video>

audio标签

• geshi

<audio src="">
</audio>

<audio>
    <source src="" type="">
</audio>

• 注意了啊
  audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样. 只不过有3个属性不能用, height/width/poste

详情概要标签

• 作用:利用summary标签来描述概要信息, 利用details标签来描述详情信息

• 默认情况下是折叠展示, 想看见详情必须点击

• 格式:

<details>
    <summary>概要信息</summary>
    详情信息
</details>

亲测，CSDN上不能使用详情概要标签~