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>

总结


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

目录
相关文章
|
12天前
HTML_表单标签
HTML_表单标签
15 0
|
1天前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
|
1天前
|
移动开发 前端开发 开发者
【专栏:HTML进阶篇】网页结构与语义化标签进阶
【4月更文挑战第30天】提升网页结构清晰度和无障碍访问性,有利于SEO。这些标签为屏幕阅读器提供额外上下文,简化CSS样式设计,避免无意义的&lt;div&gt;和&lt;span&gt;。正确使用语义化标签是现代网页开发的关键,能创造更优质、易访问和优化的Web体验。
|
1天前
|
移动开发 搜索推荐 JavaScript
【专栏:HTML 进阶篇】HTML5 新特性探索:视频、音频与画布
【4月更文挑战第30天】HTML5的视频、音频和画布元素为网页开发注入新活力。视频和音频元素提供跨平台兼容的播放体验,支持自适应和交互控制;画布则允许动态图形和动画创作。在线视频网站、音乐播放器和游戏开发广泛应用这些特性。尽管面临版权和性能挑战,HTML5持续发展,为网页创新带来更多可能。拥抱这些新特性,创造更丰富的网页世界!
|
3天前
|
前端开发 数据安全/隐私保护
Day-1 HTML基本标签和CSS常用样式
Day-1 HTML基本标签和CSS常用样式
|
6天前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
14 0
webgl学习笔记3_javascript的HTML DOM
|
12天前
|
前端开发 容器
HTML_块级标签
HTML_块级标签
12 0
|
12天前
HTML_行内标签
HTML_行内标签
13 0
|
12天前
|
前端开发 JavaScript 开发者
html标签的样式
【4月更文挑战第19天】html标签的样式
13 2
|
12天前
|
JavaScript 前端开发 SEO
html标签
【4月更文挑战第19天】html标签
18 1