在HTML中插入音频和视频（详解）

已于 2023-12-20 16:53:55 修改
阅读量1.3w 收藏 105
点赞数 39
分类专栏： HTML5 前端 文章标签： html 前端
于 2023-12-10 06:35:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jin_Xiang123/article/details/134896469
版权

Hi i,m JinXiang

⭐ 前言 ⭐

本篇文章主要介绍在HTML中插入音频和视频以及部分理论知识

🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获，友友们有任何问题可以在评论区留言

目录

一、音频标签：audio

1、简介

2、使用

二、视频标签：video

1、简介

2、使用

三、使用音频（audio）和视频（video）需要注意事项：

一、音频标签：audio

1、简介

在HTML中，`<audio>`标签用于嵌入音频文件，使其可以在网页中播放。`<audio>`标签具有以下特点：

  •  `<audio>`标签可以嵌入多种音频格式，如MP3、OGG、WAV等。
  •  通过`src`属性指定音频文件的URL，通过`controls`属性指定是否显示播放器控件。
  •  可以使用`<source>`标签指定多个音频文件，浏览器会选择支持的格式进行播放。
  •  可以使用`<track>`标签添加音频描述、字幕等元数据。
  •  可以通过CSS样式控制音频的外观。
  •  支持事件，如播放、暂停、结束等。

总的来说，`<audio>`标签是在网页中嵌入音频文件的一种简单而方便的方式，可以帮助网页设计师更加灵活的设计网页。

2、使用

1. 创建`<audio>`标签，并设置`src`属性，指定音频文件的URL。

<audio src="music.mp3"></audio>

2. 添加`controls`属性，显示播放器控件。

<audio src="music.mp3" controls></audio>

3. 添加`<source>`标签指定多个音频文件，浏览器会选择支持的格式进行播放。

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  <source src="music.wav" type="audio/wav">
</audio>

除了上述基本用法外，`<audio>`标签还支持多种其他属性和事件，如`autoplay`属性、`loop`属性、`ended`事件等等，根据需要进行设置即可。

二、视频标签：video

1、简介

HTML中`<video>`标签用于添加视频到网页中。通过`<video>`标签，我们可以在网页上播放本地或者在线的视频。

  • `<video>`标签可以添加多个属性和事件，其中一些常用的属性和事件如下：
  •  `src`: 视频文件的 URL 地址。
  •  `autoplay`: 自动播放音频。
  •  `controls`: 显示播放器控件。
  •  `loop`: 循环播放视频。
  •  `width` 和 `height`: 视频的宽度和高度。
  •  `poster`: 设定视频的封面。

在使用`<video>`标签时，可以嵌套`<source>`标签，这样可以添加多个视频文件，浏览器会自动选择支持的视频格式进行播放。

2、使用

1. 在`<video>`标签中设置视频文件的`src`属性，指定视频文件的URL地址。如果有多个格式的视频文件，在`<video>`标签中添加多个`<source>`标签，浏览器会自动选择支持的格式进行播放。

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
</video>

2. 可以使用`controls`属性来显示播放器控件，例如播放、暂停、音量、全屏等。

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
</video>

3. 还可以设置视频的尺寸、自动播放、循环等属性。

<video width="640" height="360" autoplay loop>
  <source src="video.mp4" type="video/mp4">
</video>

上面这段代码将视频设置为自动播放，并且设置为循环播放。

三、使用音频（audio）和视频（video）需要注意事项：

  • 1、浏览器支持的音频和视频格式不同，需要在`<source>`标签中提供不同格式的文件来兼容不同的浏览器。
  • 2、在设置`src`属性时，应该使用相对路径或绝对路径，避免使用相对于当前页面的路径。
  • 3、使用`controls`属性会显示默认的播放器控件，但是在移动设备上默认控件可能无法显示或不够友好。此时可以使用JavaScript自定义控件。
  • 4、在不同的浏览器和操作系统下，对于媒体的支持情况也可能不同，因此需要在不同的浏览器和设备上进行测试。
  • 5、如果使用自定义控件，需要注意控件的可用性和兼容性，避免在某些浏览器或设备上无法使用。
  • 6、浏览器默认情况下不会自动播放媒体文件，需要用户手动点击播放按钮。如果希望实现自动播放的效果，需要在设置`<audio>`或`<video>`标签时添加`autoplay`属性。
  • 7、使用媒体文件会占用网站的带宽，需要注意使用合适的压缩方法来减小文件大小，避免对网站性能造成负面影响。

总之，在使用<audio>和<video>标签时，需要进行充分的测试和优化，以提供良好的用户体验和兼容性。

总结不易，希望uu们不要吝啬亲爱的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁

锦湘
关注
  • 39
    点赞
  • 踩
  • 105
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html插入视频&html插入音频
weixin_52772897的博客
03-05 465
视频 <object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"> <param name="ShowDisplay" value="0"> <param name="ShowControls" value="0"> <param name="AutoStart"...
HTML5 embed标签定义和用法详解
12-14
HTML5的`<embed>`标签是用来插入外部内容的，如多媒体插件，如Flash、PDF、音频或视频等。这个标签允许网页开发者将各种不同类型的媒体整合到他们的页面中，提供丰富的用户体验。在HTML4.01标准中，`<embed>`标签并...
html网页添加音乐视频的实现示例
12-28
1.video标签 支持firefox自动播放 谷歌、ie不支持自动播放 <video controls=controls autoplay=autoplay name=media><source src=./img/music.mp3 type=audio/mpeg></video> 谷歌可以通过添加 muted 通过静音来实现自动播放 <video controls=controls autoplay=autoplay name=media muted><source src=./img/music.mp3 type=audio/mpeg></
在html中插入播放视频
susan的博客
05-14 5110
代码： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ee</title> </head> <body> <video width="500" height="200" controls> <sour...
HTML5 音频 Audio 标签详解
最新发布
一名全栈开发工程师
05-31 2282
HTML5 引入了标签，允许开发者在网页中直接嵌入音频文件，而不需要依赖第三方插件。
在HTML中如何设曾音频和视频?
zz14664656的博客
12-18 457
autoplay表示视频自动播放。video/mp4表示视频的格式。controls表示进度控制条。height表示视频高度。src表示视频来源位置。muted表示静音播放。loop表示循环播放。
Html插入视频
03-09
Html插入视频
如何在html中加入视频
热门推荐
lalalalalala_的博客
01-06 33万+
第一步：首先下载video.js，百度一下就能找到。 这个是下载后的目录。 第二步：先把要用到的js\css\swf都加载到html页面上。 如： videojs.options.flash.swf = "video-js/video-js.swf"; 第三步：加入下面的代码：
html中引入视频的方法
m0_64562972的博客
10-16 3万+
视频
零基础HTML入门教程(13)——插入视频video标签
weixin_61808806的博客
12-06 5697
我们前几小结学习了，插入图片插入音频等，我们这一小结学习一下，插入视频标签video并熟练使用。(1)直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 (2)controls 属性供添加播放、暂停和音量控件。 包含宽度和高度属性也是不错的主意。 代码如下 效果如下 我们可以看到，页面上面会出现一个可以播放的视频，我们再一些网站上看到视频，都是用
【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-19 1万+
一、HTML5 多媒体标签 二、音频标签 三、音频标签代码示例 ( 默认操作 ) 四、音频标签代码示例 ( 插入 mp3 / ogg 两种格式的音频 )
html标签之Object和EMBED标签详解
01-19
此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。 <object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。 object 的初衷是...
HTML embed标签使用方法和属性详解
09-28
HTML 的 `<embed>` 标签是用来插入多媒体内容的，如音频、视频或者插件，它在现代网页设计中扮演着重要角色。以下是 `<embed>` 标签的详细使用方法和属性解析： 1. **基本语法**： `<embed src="url">` 这里 `src`...
零基础HTML入门教程(12)——插入音频audio标签
weixin_61808806的博客
12-06 2551
我们前几个小结学习了，插入图片，或者插入超链接，那我们这一小结学习一下插入音频audio标签直到现在，仍然不存在一项旨在网页上播放音频的标准。 今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 audio 元素来包含音频的标准方法。 audio 元素能够播放声音文件或者音频流。 代码演示 效果如下 我们可以看到使用这个标签后，我们可以页面上面看到一个音频，并且是可以播放的，我们要熟练合理使用这个标签，是为以后网页开发必不可少的因素。
HTML插入音频的基本方法
qq_58174484的博客
01-22 2万+
HTML插入音频的基本方法
【完整代码】如何在html中插入图片/视频
weixin_68516344的博客
08-08 1万+
【完整代码】如何在html中插入图片/视频
如何在html网页中插入视频（以及让视频自动播放的问题）
m0_74191800的博客
05-24 2万+
(10条消息) 关于如何在html网页中插入可以自动播放的背景音乐_Davis-plus的博客-CSDN博客。class定义了video类 在style中调整这个类的长度和高度属性；（end），不过这个是将整个body部分全部居中(置后)了；autoplay属性：让视频可以自动播放；的播放，包括音量，跨帧，暂停/恢复播放；调整为100%（下图以500px为例）还有一些关于视频在网页中位置的调整。视频要居中或者置后的操作可在。简单介绍下用到的几个属性。src处引入视频的链接；关于视频的插入可使用。
html插入视频的的格式,用记事本写html肿么插入视频,视频什么格式
weixin_30511777的博客
06-09 784
HTML网页中插入视频方法：1.用object 标签objecthttp://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf." target="_blank">http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf. target=_blankh...
HTML插入视频和音频
wenqi1的博客
08-22 1万+
一、插入视频 src表示视频来源位置 height表示视频高度 autoplay表示视频自动播放 loop表示循环播放 controls表示进度控制条 muted表示静音播放 poster表示视频封面所用的图片路径 video/mp4表示视频的格式 例如： <videosrc="images\sp1.mp4"height="150px"autoplay="autoplay" loop="loop" controls="controls" poster="images\t3....
链表插入元素和删除元素详解
05-24
链表是一种常见的数据结构，它由一些节点组成，每个节点包含一个数据项和指向下一个节点的指针。链表中的数据项可以是任何类型的数据，例如整数、字符串等。链表插入元素和删除元素是链表操作中常见的两种操作。 链表插入元素 链表插入元素操作可以分为两种情况： 1. 在链表头插入元素 在链表头插入元素是最简单的一种情况，因为只需要将新元素插入到链表头部即可。具体步骤如下： （1）创建一个新节点，将需要插入的元素赋值给新节点的数据项。 （2）将新节点的指针指向原链表的头节点。 （3）将新节点设置为链表的新头节点。 示例代码： ``` struct Node { int data; struct Node* next; }; void insertAtBeginning(struct Node** head_ref, int new_data) { /* 1. create new node */ struct Node* new_node = (struct Node*)malloc(sizeof(struct Node)); /* 2. put in the data */ new_node->data = new_data; /* 3. Make next of new node as head */ new_node->next = (*head_ref); /* 4. move the head to point to the new node */ (*head_ref) = new_node; } ``` 2. 在链表中间或尾部插入元素 在链表中间或尾部插入元素需要先找到要插入的位置，然后将新元素插入到该位置之后。具体步骤如下： （1）创建一个新节点，将需要插入的元素赋值给新节点的数据项。 （2）遍历链表，找到要插入的位置。 （3）将新节点的指针指向该位置的下一个节点。 （4）将该位置的节点的指针指向新节点。 示例代码： ``` void insertAfter(struct Node* prev_node, int new_data) { /*1. check if the given prev_node is NULL */ if (prev_node == NULL) { printf("the given previous node cannot be NULL"); return; } /* 2. create new node */ struct Node* new_node = (struct Node*)malloc(sizeof(struct Node)); /* 3. put in the data */ new_node->data = new_data; /* 4. Make next of new node as next of prev_node */ new_node->next = prev_node->next; /* 5. move the next of prev_node as new_node */ prev_node->next = new_node; } ``` 链表删除元素 链表删除元素操作也可以分为两种情况： 1. 删除链表头元素 删除链表头元素需要将链表的头指针指向下一个节点即可。具体步骤如下： （1）如果链表为空，则返回。 （2）将头节点指针指向下一个节点。 （3）释放原头节点的内存空间。 示例代码： ``` void deleteAtBeginning(struct Node** head_ref) { /* 1. check if the list is empty */ if (*head_ref == NULL) return; /* 2. Store head node */ struct Node* temp = *head_ref; /* 3. Change head to next node */ *head_ref = (*head_ref)->next; /* 4. free the old head node */ free(temp); } ``` 2. 删除链表中间或尾部元素 删除链表中间或尾部元素需要先找到要删除的节点，然后将该节点的前一个节点的指针指向该节点的下一个节点即可。具体步骤如下： （1）如果链表为空，则返回。 （2）遍历链表，找到要删除的节点。 （3）将该节点的前一个节点的指针指向该节点的下一个节点。 （4）释放该节点的内存空间。 示例代码： ``` void deleteNode(struct Node** head_ref, int key) { /* 1. check if the list is empty */ if (*head_ref == NULL) return; /* 2. store head node */ struct Node* temp = *head_ref, *prev; /* 3. if head node itself holds the key to be deleted */ if (temp != NULL && temp->data == key) { *head_ref = temp->next; /* change head */ free(temp); /* free old head */ return; } /* 4. search for the key to be deleted, keep track of the previous node as we need to change 'prev->next' */ while (temp != NULL && temp->data != key) { prev = temp; temp = temp->next; } /* 5. if key was not present in linked list */ if (temp == NULL) return; /* 6. unlink the node from linked list */ prev->next = temp->next; /* 7. free memory */ free(temp); } ``` 以上就是链表插入元素和删除元素的详细介绍和示例代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值