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

颜颜yan_

发布于 2022-12-01 18:45:34

2.6K0

发布于 2022-12-01 18:45:34

文章被收录于专栏：颜颜yan_的学习笔记

前言

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

总结

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-11-03，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度