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>

总结


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

目录
打赏
0
0
0
0
45
分享
相关文章
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
132 49
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
114 5
HTML5 Video(视频)2
HTML5 `&lt;video&gt;` 标签及其相关属性和方法简介:支持 MP4、WebM 和 Ogg 视频格式。通过 JavaScript 控制播放、暂停、加载及设置属性如音量、尺寸等。示例展示了如何使用 `play()`、`pause()` 方法及 `paused`、`width` 属性创建基本的播放/暂停和调整尺寸控件。
HTML5 Audio(音频)
HTML5 Audio 标准允许网页直接播放音频文件,无需依赖插件。通过 `&lt;audio&gt;` 标签,开发者可以在网页中嵌入音频,支持多种格式如 MP3、WAV 和 Ogg。主流浏览器如 IE9+、Firefox、Chrome、Safari 和 Opera 均支持此功能,但不同浏览器对音频格式的支持存在差异。使用 `&lt;source&gt;` 标签可指定多个源文件,确保兼容性。
HTML5 Video(视频)1
HTML5引入了&lt;video&gt;元素,为网页视频播放提供标准方法。它支持播放、暂停和音量控制,以及视频尺寸设置。主要浏览器如IE9+、Firefox、Opera、Chrome和Safari均支持此元素。&lt;video&gt;元素可通过多个&lt;source&gt;子元素链接不同格式的视频文件,以确保兼容性。当前支持的视频格式包括MP4、WebM和Ogg。
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
60 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布