HTML 学习笔记——插入音频、视频标签

简介: audio标签用来向页面中引入一个外部的音频文件。音视频文件引入时,默认情况下不允许用户自己控制播放按钮。

前言


今天学习了尚硅谷老师的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>

总结


以上就是今天的学习笔记啦,希望对大家有帮助~

相关文章
|
27天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2月前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
37 3
|
27天前
|
存储 移动开发 前端开发
|
2月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
44 2
|
2月前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
117 0
|
7月前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
88 0
|
移动开发 HTML5
在HTML5中 视频标签 和音频标签的介绍
在HTML5中 视频标签 和音频标签的介绍
185 0
|
移动开发 定位技术 API
HTML5 —— 拖放、地理位置、视频和音频的基本使用
HTML5 —— 拖放、地理位置、视频和音频的基本使用
112 0
|
移动开发 HTML5
如何在HTML5中使用视频和音频?
如何在HTML5中使用视频和音频?
|
移动开发 HTML5
一文搞懂HTML5标签新特性【视频、音频、语义】
一文搞懂HTML5标签新特性【视频、音频、语义】
一文搞懂HTML5标签新特性【视频、音频、语义】