在HTML中如何设置音频和视频

目录

HTML中如何设置音频和视频

什么是绝对路径、相对路径

添加音频代码示例：

添加视频代码示例：

---

HTML中如何设置音频和视频

视频:<video src="视频路径" controls></video>

音频<audio src="音频路径" controls></video>

什么是绝对路径、相对路径

绝对路径：路径+名字

相对路径：同一个文件夹图片名字

添加音频代码示例：

1. src：指定音频文件的URL。
2. controls：显示播放控件。
3. autoplay：自动播放。
4. loop：循环播放。
5. volume：音量大小。

    <div>
        <p>音频</p>
        <audio controls autoplay loop muted>
            <source src="./media/music.mp3">
            <source src="./media/music.ogg">
        </audio>
    </div>

运行结果

添加视频代码示例：

1. controls:控制播放暂停的按钮
2. autoplay:自动播放
3. loop:无限循环
4. muted:静音
5. poster:视频封面

    <div>
        <!--
       controls:控制播放暂停的按钮
       autoplay:自动播放
       loop:无限循环
       muted:静音
       poster:视频封面
   -->

        <div style="display: inline-block">
            <video src="../登录注册/images/视频2.mp4" controls="controls" muted autoplay="autoplay" width="290px"></video>
            <br>
            <span>震惊！！！郴州学校.....</span>

        </div>
    </div>

运行结果如下

在html5中嵌入视频网站视频

  比起运用“video”元素播放本地视频，直接嵌入视频网站的视频是一种既帅气又酷炫的方式。之前一直找不到正确方法把视频网站的视频嵌入html5，后来偶然解锁了嵌入视频的标准姿势，简单到比你想象的还简单，甚至不用写代码