07-HTML 中的音频、视频 标签

HTML 中的音频、视频标签

1、音频audio标签

• audio标签用来向页面引入一个外部的音频文件

  音频文件引入时，默认情况下不允许用户自己控制播放或停止

• audio标签的属性

  • controls 是否允许用户控制播放

  • autoplay 音频文件是否自动播放

    如果设置了autoplay 则音乐在打开页面时会自动播放

    但是目前来讲大部分浏览器都不会自动对音乐进行播放

  • loop 音乐是否循环播放

  <audio src="路径" controls autoplay loop></audio> 
  <audio src="./source/audio.mp3" controls></audio>
  
  <!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
  <audio controls>
     <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
     <source src="./source/audio.mp3">
     <source src="./source/audio.ogg">
     <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
  </audio>
  

2、视频video标签

• video标签来向网页中引入视频

  使用方法和audio基本一样

      <video controls>
          <source src="./source/flower.webm">
          <source src="./source/flower.mp4">
          <embed src="./source/flower.mp4" type="video/mp4">
      </video>
  <!--也可以通过内联框架来进行插入一个外部网站的视频-->
      <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>