前端之HTML视频音频
Posted 一只爱吃萝卜的小兔子
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端之HTML视频音频相关的知识，希望对你有一定的参考价值。
前端之html视频、音频
网页中的音频和视频
HTML5 添加了许多的新特性，包括 <video> 和 <audio> 标签，以及一些 javascript 和 APIs 用于对其进行控制。
YouTube 、Dailymotion 、Vimeo、Bilibili等在线视频提供商，以及Soundcloud等在线音频提供商 。这些公司提供方便、简单的方式来支持视频，不必担心庞大的带宽消耗。
<video> 元素
在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放
简单视频
视频的尺寸多大占位就是多大。可以用width、height指定尺寸。
video
max-width: 100%;
max-height: 100%;
<video src="./video/475829081-1-112.mp4" controls>
<p>你的浏览器不支持 HTML5 视频。可点击<a href="https://www.bilibili.com/video/BV19F411i7yp?spm_id_from=333.999.0.0">此链接</a>观看</p>
</video>
src 指向嵌入网页中的视频资源
controls 显示浏览器自带的控件，如果没有就像加了一个图片一样
<video>标签内的文本内容是后备内容，当览器不支持 <video> 标签的时候显示。
格式问题
文件：
视频文件有MP3、MP4、WebM等格式。不同格式定义了构成媒体文件的音频轨道和视频轨道的不同储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。
浏览器：
浏览器并不全支持相同的 codecs，所以你得使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持，那么媒体文件将不会播放。
多播放源视频
MP3 (音频格式) 和 MP4/H.264 (视频格式) 是被广泛支持的两种格式，并且质量良好。但有专利问题。
WebM由Google提出，是一个开放、免费的媒体文件格式。包含VP8影片轨和 Ogg Vorbis 音轨。
<video controls>
<source src="./video/475829081-1-112.mp4" type="video/mp4">
<source src="./video/475829081-1-112.webm" type="video/webm">
<p>你的浏览器不支持 HTML5 视频。可点击<a href="https://www.bilibili.com/video/BV19F411i7yp?spm_id_from=333.999.0.0">此链接</a>观看</p>
</video>
其他特性
| 属性 | 作用 |
|---|---|
| autoplay | 音频和视频内容立即播放，哪怕网页还没加载完 |
| autobuffer | 视频会自动开始缓存，即使没有设置自动播放 |
| loop | 循环播放 |
| muted | 默认静音 |
| poster | 指向了一个图像，会在视频播放前显示。用于预览或广告。 |
| preload | “none” ：不缓冲；“auto” ：页面加载后缓存媒体文件；“metadata” ：仅缓冲文件的元数据 |
<audio> 元素
在文档中嵌入音频内容，使用方法与<video>元素十分相似。
音频实例
<audio controls>
<source src="./audios/audio.aac" type="audio/aac">
<source src="./audios/audio.mp3" type="audio/mp3">
<source src="./audios/audio.ogg" type="audio/ogg">
<p>你的浏览器不支持 HTML5 音频的播放。 </p>
</audio>
type 属性，方便浏览器找到支持的格式。
嵌入
<h3>嵌入pdf——1</h3>
<section>
<iframe width="100%" height="950" src="./pdfs/JavaScript权威指南(第6版)(中文版).pdf" frameborder="0"></iframe>
</section>
<h3>嵌入pdf——2</h3>
<embed src="./pdfs/JavaScript权威指南(第6版)(中文版).pdf" width="100%" height="960">
<h3>嵌入pdf——3</h3>
<object data="./pdfs/JavaScript权威指南(第6版)(中文版).pdf" type="application/pdf" width="800" height="1200" typemustmatch>
<p>You don't have a PDF plugin, but you can
<a href="./pdfs/JavaScript权威指南(第6版)(中文版).pdf">download the PDF file.</a>
</p>
</object>
重构前端知识体系之HTMLHTML5给网页音频带来的变化
【重构前端知识体系之HTML】HTML5给网页音频带来的变化
引言
音乐播放，相信大家都很熟悉，但是早在之前的音乐播放之前，你的浏览器会问你，是否下载flash插件。然而现在，估计一些年轻的开发者都不用了解flash是啥了。因为HTML5来了，它改变了这一切。
HTML5音频的播放方式
是的，HTML5带来了不止一种能够播放音频的方式。
使用插件
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
插件可以使用 object 标签 或者 embed 标签添加在页面上。
embed方式
embed定义一个外部的容器，用来装放MP3等音频文件。
例如
<embed height="50" width="100" src="demo.mp3">
效果
缺陷
- embed标签在 HTML 4 中是无效的，因为它是HTML5新出的标签
- 依赖浏览器的支持
- 依赖插件的安装
obejct方式
obejct也可以定义一个外部的容器，用来装放MP3等音频文件。
例如
<object height="50" width="100" src="demo.mp3"></object>
效果
缺陷
- 依赖浏览器的支持
- 依赖插件的安装
audio方式
audio标签是HTML5专门为音频出的一个标签。推荐使用！
<audio src="horse.mp3" controls></audio>
效果
缺陷
-
embed标签在 HTML 4 中是无效的，因为它是HTML5新出的标签
-
依赖浏览器的支持
最好的解决方案
上面讲了三种使用音频的方式，可以将一些结合起来使用。
示例
<audio controls height="100" width="100">
<source src="demo.mp3" type="audio/mpeg">
<source src="demo.ogg" type="audio/ogg">
<embed height="50" width="100" src="demo.mp3">
</audio>
讲解
看到以上用到了三个标签，这样做的好处是audio会尝试用mp3 或 ogg 来播放音频，如果播放失败了，会回退到embed。
效果
显示的效果基本与audio一致！
audio标签
audio的属性
一些常用的audio属性，全局属性在这里就没有列出来来了。更多请到w3school查阅。
| 属性 | 描述 |
|---|---|
| autoplay | 设置或返回是否在加载完成后随即播放音频/视频 |
| controls | 设置或返回音频/视频是否显示控件（比如播放/暂停等） |
| loop | 设置或返回音频/视频是否应在结束时重新播放 |
| muted | 设置或返回音频/视频是否静音 |
| preload | 设置或返回音频/视频是否应该在页面加载后进行加载 |
| src | 设置或返回音频/视频元素的当前来源 |
audio的事件
事件这是我们用来跟音频发生交互的重要武器。
同样的只给出部分事件，更多请到w3school查阅。
| 事件 | 描述 |
|---|---|
| pause | 当音频/视频已暂停时 |
| play | 当音频/视频已开始或不再暂停时 |
| playing | 当音频/视频在已因缓冲而暂停或停止后已就绪时 |
| canplay | 当浏览器可以播放音频/视频时 |
| timeupdate | 当目前的播放位置已更改时 |
来一个音频播放器的案例
讲了那么多，不就是等一个案例吗，来！
码上！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0" />
<title>audio音频demo</title>
<style>
*
margin: 0;
padding: 0;
body
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
font-family: "微软雅黑"
h1
width: 100%;
font-size: 1.5em;
text-align: center;
line-height: 3em;
color: #33942a;
#audio
width: 100%;
.control-body
display: flex;
align-items: center;
justify-content: center;
#control
width: 150px;
height: 150px;
border-radius: 200px;
border: none;
box-shadow: #888 0 0 8px;
</style>
</head>
<body>
<script>
function play()
let audio = document.getElementById("audio");
if (audio.paused)
audio.pasue();
else
audio.play();
</script>
<h1>audio音频播放demo</h1>
<div class="control-body">
<button class="control" id="control" onclick="play()">开始</button>
</div>
<audio id="audio" src="http://96.ierge.cn/15/235/471737.mp3"></audio>
</body>
</html>
总结
音频的确在现在的网页中用的十分平常了，使用的的方式也发生了很大的改变。后续写一个关于音频的demo案例！
重构前端知识体系，你要一起吗？
博客说明与致谢
文章所涉及的部分资料来自互联网整理，其中包含自己个人的总结和看法，分享的目的在于共建社区和巩固自己。
引用的资料如有侵权，请联系本人删除！
感谢万能的网络，W3C，菜鸟教程等！
如果你感觉对你有帮助的话，不妨给我点赞鼓励一下，好文记得收藏哟！关注我一起成长！
所属专栏：重构前端知识体系（HTML）
幸好我在，感谢你来！
以上是关于前端之HTML视频音频的主要内容，如果未能解决你的问题，请参考以下文章