标签音频和视频的引入（auido和video）替换元素

最新推荐文章于 2024-02-08 15:11:14 发布

¡Venceremo

最新推荐文章于 2024-02-08 15:11:14 发布

阅读量767

点赞数

分类专栏： HTML html5 文章标签：音视频 html servlet

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127264843

版权

HTML 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html5

7 篇文章 0 订阅

订阅专栏

html-音频视频的网页中引入——属于替换元素

音频的标签audio 向页面引入外部音频文件
src是引入的路径，路径可以是外部的文件（网上），也可以是本地的./
<audio src="./xx.mp3"></audio>——此时网页中不显示音频
音频视频文件默认是不允许用户自己控制播放停止——使用属性controls表示用户可以控制了
<audio src="./xx.mp3" controls></audio>此时页面会出现音频的显示

controls属性，有些属性是可以不需要给值——controls就是
controls：是否允许用户控制播放
autoplay:表示音频文件是否自动播放，如果设置了，在打开页面的时候会自动播放
       但是目前的大部分浏览器不支持，对于一些情况下，背景音乐对用户的体验
       可能不是很好，但是如果你曾经打开过这个音频，然后再次刷新这个页面就
       会有自动播放的效果
loop:写了之后音乐播放到截止会循环播放
这个标签有些浏览器不支持—但是浏览器显示的效果是空白
—需要浏览器对用户进行提示

src只能指定一个文件来源的音频，除了通过src指定文件的路径外，还可以使用source指定文件路径（这里使用的音频文件一般是相同音乐的不同格式，为了支持不同的浏览器）
使用source可以同时指定多个音频，优先使用第一个，第一个不可用使用第二个
解决了浏览器的不支持该格式音频的情况
<audio controls>
       对不起，您的浏览器不支持播放音频，请升级浏览器
       <source src="./xx.mp3">
       <source src="./xx.ogg">
</audio>
对于不支持的浏览器上述两个标签可以忽略，但是文字不能忽略
支持的就会忽略

解决浏览器兼容性的问题 embed几乎所有的浏览器都支持(将外部内容嵌入到文档中的指定点。该内容由外部应用程序或其他交互内容来源(如浏览器插件)提供-但是大多数现代浏览器已经弃用并删除了对浏览器插件的支持)
<embed src="./xx.mp3" type="">在不同的浏览器显示的效果不仅不同，而且有些显示不完全
<embed src="./xx.mp3" type="" width="44" height="55">

embed可以放音频，但是它是自动播放的，这个标签必须指定宽和高，不然显示
的高度大小可能显示的极小，上述的效果比较丑
type:指定文件的类型 audio/mp3 前面是大类型（音频、视频、图片）/后面是具体的小格式
所以可以更改为
<audio controls>
       <source src="./xx.mp3">
       <source src="./xx.ogg">
       <embed src="./xx.mp3" type="audio/mp3" width="44" height="55">
</audio>

video标签——视频-也可以通过src属性引入，使用方式和audio差不多需要加controls
<video controls>
   <source src="./ss.webm">webm是谷歌推出的视频格式
   <source src="./ss.mp4">如果第一个可以播放就播放第一个
</video>
ie8不支持解决兼容性问题
<video controls>
   <source src="./ss.webm">webm是谷歌推出的视频格式
   <source src="./ss.mp4">如果第一个可以播放就播放第一个
   <embed src="./xx.mp4" type="video/mp4" width="44" height="55">
</video>
——————————————————————————————
上述都是本地文件，引入的路径都是本地路径，比较费资源
可以将音频视频的文件使用其他人的服务器
或者将音频视频文件上传到网上，使用其他人的服务器iframe标签，内联框架。腾讯选择嵌入代码