HTML中音视频标签-audio-,video-

JAY.LIN 收录于 Html

2024-12-14 约 698 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=124066651

HTML中音视频标签—— ＜audio ＞ ,＜video ＞

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

音视频文件引入时，默认情况下不允许用户自己控制播放停止,IE9以下的浏览器是不支持的

属性：

controls 是否允许用户控制播放，不用给值

autoplay 音频文件是否自动播放打开页面时，音乐会自动播放，但目前为止，大部分浏览器是不可以自动播放的

loop 是否循环播放

二：video标签来向页面中引入一个视频

使用方式跟音频基本上一样的

除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- audio标签 用来向页面中引入一个外部的音频文件
              音视频文件引入时，默认情况下不允许用户自己控制播放停止
              IE9以下的浏览器是不支持的
            属性：
              controls  是否允许用户控制播放，不用给值
              autoplay  音频文件是否自动播放  打开页面时，音乐会自动播放，
                           但目前为止，大部分浏览器是不可以自动播放的
              loop  是否循环播放

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

    <!-- video标签来向页面中引入一个视频
           使用方式跟音频基本上一样的 -->
    <video src="./source//杨洋.mp4" controls></video>

    <!-- <video controls>
      <source src="./source/绝地逢生.mp4" />
      <source src="./source//video.webm" />
    </video> -->

    <!--外部资源-->
    <iframe src="https://v.qq.com/x/page/d3325ij2ylt.html" frameborder="0"></iframe>
  </body>
</html>

目录

HTML中音视频标签-audio-,video-

HTML中音视频标签—— ＜audio ＞ ,＜video ＞