html 如何设置音频和视频

目录

音频标签：audio

一些常用的属性

​编辑视频标签：video

网页中调用多媒体

兼容问题：

---

前言

        运用HTML5的<video>和<audio>标签可以在页面中嵌入视频或音频文件，如果想要这些文件在页面中加载播放，还需要设置正确的多媒体格式。

视频格式：视频格式包含视频编码、音频编码和容器格式。
音频格式：音频格式是指要在计算机内播放或是处理音频文件。

音频标签：audio

一些常用的属性

属性	描述
controls	是否允许用户控制播放
autoplay	音频文件是否自动播放。如果设置了autoplay，则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop	音乐是否循环播放。设置了此属性，则音乐会进行循环播放

<audio controls>
           <source src="音频路径” type="音频格式"/>
</audio>

运行结果 

视频标签：video

一些常用的属性

属性	描述
autoplay	当页面加载完成后自动播放音频
preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"属性，则忽略该属性。
loop	音频结束时重新开始播放

<video controls autoplay loop>
    <source src="aaa.mp4"/>
</video>

运行结果：  视频一定要运行到浏览器去，不然不能查看！

除了标签不一样，里面的属性还是一样的用法

网页中调用多媒体

• 1、调用本地多媒体文件
• 2、调用指定url地址的互联网多媒体文件

方法一 就是我们前面所用的，我是提前准备好文件，这样准备文件比较麻烦，需要下载文件，上传文件等操作

方法二 属性设置一个完整的URL，直接调用网络中的音、视频文件

<video src="网页中多媒体的网址" controls></video>

兼容问题：

一般插入音视频，浏览器都兼容，但是IE8会无法显示 可以添加向注释一样的提示语

 <audio controls>
        对不起，您的浏览器不支持播放音频，请升级浏览器
        <!-- 这种方式可以引入多个source -->
        <source src="./Zeraphym 六翼使徒 - Lifeline.mp3">
    </audio>