HTML-多媒体标签

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>

• 效果图：