HTML 多媒体
网络上的多媒体包括声音、音乐、视频、电影和动画。
多媒体有许多不同的格式。它几乎可以是你能听到或看到的任何东西，比如图像、音乐、声音、视频、唱片、电影、动画等等。
网页通常包含不同类型和格式的多媒体元素。
多媒体文件有不同的格式和扩展名，如:.wav、.mp3、.mp4、.mpg、.wmv和.avi。
目录
[HTML 多媒体](#HTML 多媒体)
[4.1.播放 YouTube 视频](#4.1.播放 YouTube 视频)
1.Html--视频（video）
HTML <video> 元素用于在网页上显示视频。
（确保本地有这个视屏文件）
html
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML 视频。
</video>
<p>
视频由
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>
工作原理：
controls 控制属性添加视频控件，如播放、暂停和音量。
最好始终包含宽度 width 和 height 属性。如果未设置高度和宽度，则在加载视频时页面可能会闪烁。
<source> 元素允许您指定浏览器可以从中选择的备选视频文件。浏览器将使用第一个识别的格式。
标记之间的文本将在不支持 video 元素的浏览器中显示。
1.1.自动播放
要自动启动视频，请使用自动播放 autoplay 属性:
html
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 视频标签。
</video>
<p><b>注意：</b> autoplay 属性在某些移动设备上无效。</p>
</body>
</html>
自动播放属性在 iPad 和 iPhone 等移动设备中不起作用。
1.2.方法属性
HTML <video> 定义元素的方法、属性和事件。
这允许您加载、播放和暂停视频，以及设置持续时间和音量。
还有一些 DOM 事件可以在视频开始播放、暂停等时通知您。
html
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暂停</button>
<button onclick="makeBig()">大</button>
<button onclick="makeSmall()">小</button>
<button onclick="makeNormal()">正常</button>
<br><br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
您的浏览器不支持 HTML 视频。
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
<p>视频由 <a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a> 提供。</p>
</body>
</html>
2.Html--音频（audio）
要在 HTML 中播放音频文件，请使用 <audio> 元素:
html
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
你的浏览器不支持 audio 元素。
</audio>
</body>
</html>
工作原理和视频类似
3.Html--插件
插件（Plug-in）是扩展浏览器标准功能的计算机程序。
插件被设计用于许多不同的目的:
- 运行 Java 小程序
- 运行 ActiveX 控件
- 显示 Flash 电影
- 显示地图
- 扫描病毒
- 验证银行账号
警告！
大多数浏览器不再支持 Java Applet 和插件。
所有浏览器均不再支持 ActiveX 控件。
在现代浏览器中，对 Shockwave Flash 的支持也已关闭。
3.1.object元素
所有浏览器均支持 <object> 元素。
<object> 元素定义 HTML 文档中的嵌入式对象。
它旨在将插件（例如 Java applet、PDF 阅读器和 Flash 播放器）嵌入网页中，但也可以用于将 HTML 包含在 HTML 中:
html
<!DOCTYPE html>
<html>
<body>
<object data="audi.jpeg"></object>
</body>
</html>
3.2.embed元素
所有主要浏览器均支持 <embed> 元素。
<embed> 元素也可定义了 HTML 文档中的嵌入式对象。
Web 浏览器长期以来一直支持 <embed> 元素。但是，它不属于 HTML5 之前的 HTML 规范的一部分。
html
<!DOCTYPE html>
<html>
<body>
<embed width="100%" height="500px" src="snippet.html">
</body>
</html>4.Html--YouTube视频
在 HTML 中包房视频的最简单方法是，使用 YouTube。
YouTube Video Id：
保存（或播放）视频时，YouTube 会显示一个 id（例如 ih1l6wb7LhU）。
您可以使用这个 id，并在 HTML 代码中引用您的视频。
4.1.播放 YouTube 视频
如需在网页上播放视频，请执行以下操作:
- 将视频上传到 YouTube
- 记下视频 id
- 在您的网页中定义
<iframe>元素 - 让
src属性指向视频的 URL - 使用
width和height属性来规定播放器的尺寸 - 向 URL 添加其他参数（参阅下文）
html
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>
</body>
</html>
您可以通过在 YouTube URL 上添加 autoplay=1 来让视频在用户访问页面时自动开始播放。但是，自动开始播放视频会让您的访问者感到烦恼！
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1\&mute=1">