前言
今天学习了尚硅谷老师的html基础课程,主要是音视频的标签的属性和使用方法。
html中插入音频和视频的方法基本相同,这里以音频为例进行演示
音频格式:mp3、ogg、wav
视频格式:mp4、ogv、webm
一、音频标签:audio
1.audio简介
audio标签用来向页面中引入一个外部的音频文件。音视频文件引入时,默认情况下不允许用户自己控制播放按钮。
以下情况在页面中不会显示,需要加上controls:
<audio src="./Zeraphym 六翼使徒 - Lifeline.mp3"></audio>
2.常用属性
controls:是否允许用户控制播放。
<audio src="./Zeraphym 六翼使徒 - Lifeline.mp3" controls></audio>
autoplay:音频文件是否自动播放。如果设置了autoplay,则音乐在打开页面时会自动播放,但是目前来讲大部分浏览器都不会自动对音乐进行播放。IE浏览器可以进行自动播放。
<audio src="./Zeraphym 六翼使徒 - Lifeline.mp3" controls autoplay></audio>
loop:音乐是否循环播放。设置了此属性,则音乐会进行循环播放。
<audio src="./Zeraphym 六翼使徒 - Lifeline.mp3" controls loop></audio>
3.兼容问题
一般插入音视频,浏览器都兼容,但是IE8会无法显示,此时有两种方法。第一种方法是添加向注释一样的提示语(如下);第二种方法是使用embed标签。
除了通过src来指定外部文件的路径以外,还可以通过source来指定文件这种方式,支持的浏览器显示播放按钮,不支持的浏览器显示文字。
<audio controls> 对不起,您的浏览器不支持播放音频,请升级浏览器 <!-- 这种方式可以引入多个source --> <source src="./Zeraphym 六翼使徒 - Lifeline.mp3"> </audio>
embed:兼容IE8。使用方法如下:
元素提供了width和height属性控制显示的尺寸。
<!-- 这种方式兼容IE8 --> <embed src="./Zeraphym 六翼使徒 - Lifeline.mp3" type="audio/mp3" width="200" height="100"> <!-- 若想避免兼容的问题,则采用以下方法即可 --> <audio controls>0 <!-- 这种方式可以引入多个source --> <source src="./Zeraphym 六翼使徒 - Lifeline.mp3"> <embed src="./Zeraphym 六翼使徒 - Lifeline.mp3" type="audio/mp3" width="200" height="100"> </audio>
二、视频标签:video
1.video
video:向网页中引入一个视频,使用方法和audio类似。
<video src=""></video>
总结
以上就是今天的学习笔记啦,希望对大家有帮助~