【前端:Html】--4.进阶：媒体
HTML 多媒体
网络上的多媒体包括声音、音乐、视频、电影和动画。
多媒体有许多不同的格式。它几乎可以是你能听到或看到的任何东西，比如图像、音乐、声音、视频、唱片、电影、动画等等。
网页通常包含不同类型和格式的多媒体元素。
多媒体文件有不同的格式和扩展名，如:.wav、.mp3、.mp4、.mpg、.wmv和.avi。
目录
HTML 多媒体
1.Html--视频（video）
1.1.自动播放
1.2.方法属性
2.Html--音频（audio）
3.Html--插件
3.1.object元素
3.2.embed元素
4.Html--YouTube视频
4.1.播放 YouTube 视频
1.Html--视频（video）
HTML <video> 元素用于在网页上显示视频。
（确保本地有这个视屏文件）
<!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> 和 </video> 标记之间的文本将在不支持 video 元素的浏览器中显示。
1.1.自动播放
要自动启动视频，请使用自动播放 autoplay 属性:
<!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 事件可以在视频开始播放、暂停等时通知您。
<!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> 元素:
<!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 中:
<!DOCTYPE html>
<html>
<body><object data="audi.jpeg"></object></body>
</html>
3.2.embed元素
所有主要浏览器均支持 <embed> 元素。
<embed> 元素也可定义了 HTML 文档中的嵌入式对象。
Web 浏览器长期以来一直支持 <embed> 元素。但是，它不属于 HTML5 之前的 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 添加其他参数（参阅下文）
<!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">