【HTML 往日冒险 09】多媒体插件音频audio 视频video iframe YouTube iframe bilibili-Toy模板网

这篇具有很好参考价值的文章主要介绍了【HTML 往日冒险 09】多媒体插件音频audio 视频video iframe YouTube iframe bilibili。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

HTML 多媒体

Web 上的多媒体指的是音效、音乐、视频和动画

不同的浏览器以不同的方式处理音效、动画和视频
某些元素能够以内联的方式处理，而某些则需要额外的插件

多媒体元素（比如视频和音频）存储于媒体文件中
确定媒体类型的最常用的方法是查看文件扩展名
多媒体元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4

MP4 格式是一种视频格式
HTML5 、Flash 播放器以及优酷等视频网站均支持它

视频格式	文件	描述
AVI	.avi	Audio Video Interleave格式是由微软开发，所有运行 Windows 的计算机都支持 AVI 格式
WMV	.wmv	Windows Media格式是由微软开发，但是如果未安装额外的组件，就无法播放 Windows Media 电影
MPEG	.mpg/.mpeg	Moving Pictures Expert Group格式是跨平台的，得到了所有最流行的浏览器的支持
QuickTime	.mov	QuickTime 格式是由苹果公司开发，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放
RealVideo	.rm/.ram	RealVideo格式是由 Real Media 针对因特网开发，允许低带宽条件下（在线视频、网络电视）的视频流
Flash	.swf/.flv	Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式

声音格式	文件	描述
MIDI	.mid/.midi	Musical Instrument Digital Interface是一种针对电子音乐设备（比如合成器和声卡）的格式，MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧，同时得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI
RealAudio	.rm/.ram	RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低
Wave	.wav	waveform格式由IBM和微软开发。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它
WMA	.wma	Windows Media Audio，质量优于 MP3，兼容大多数播放器，除了 iPod，同时WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用
MP3	.mp3/.mpga	MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它

HTML 插件 plug-in

插件是扩展浏览器标准功能的计算机程序
大多数浏览器不再支持 Java Applet 和插件
所有浏览器均不再支持 ActiveX 控件
在现代浏览器中，对 Shockwave Flash 的支持也已关闭

音频 audio

需要谙熟大量技巧，以确保音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放

可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面

<embed> 标签和<object> 标签都可以定义外部（非 HTML）内容的容器

<embed heigth="60" width="150" src="/i/horse.mp3"></embed>

<object height="100" width="100" data="/i/horse.mp3"></object>

<audio controls="controls">
	<source src="/i/song.ogg" type="audio/ogg">
	<source src="/i/song.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件
如果失败，会显示错误消息

使用超链接的方式
如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件
<p><a href="/i/song.mp3">Play MP3</a></p>
<p><a href="i/bird.wav">Play WAV</a></p>

视频 video

<body>

<video width="320" height="240" controls="controls"autoplay="autoplay">
	<source src="/i/movie.ogg" type="video/ogg" />
	<source src="/i/movie.mp4" type="video/mp4" />
	<source src="/i/movie.webm" type="video/webm" />
	<object data="/i/movie.mp4" width="320" height="240">
		<embed width="320" height="240" src="/i/movie.swf" />
	</object>
</body>

使用超链接
<a href="movie.swf">Play a video file</a>

iPad 和 iPhone 不能显示 Flash 视频

YouTube

这个部分需要您的浏览器能够访问YouTube
但是使用Bilibili也可以做到，使用时注意IP地址，二者不可同时访问

将视频转换为不同的格式可能既困难又耗时
一个更简单的解决方案是让 YouTube 在您的网页中播放视频

保存（或播放）视频时，YouTube 会显示一个 id（例如 ih1l6wb7LhU）
可以使用这个 id，并在 HTML 代码中引用您的视频文章来源地址https://www.toymoban.com/news/detail-469500.html

1. 视频上传到 YouTube
2. 记下视频 id
3. 网页中定义 <iframe> 元素
4. src 属性指向视频的 URL
5. 使用 width 和 height 属性来规定播放器的尺寸
6. 向 URL 添加其他参数

<iframe width="720" height="345" src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>

B站可以直接复制嵌入代码，但是最好自己设置宽高
<iframe src="//player.bilibili.com/player.html?aid=684057457&bvid=BV1nU4y1m7dh&cid=719387188&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

可以通过在 YouTube URL 上添加 autoplay=1 来让视频在用户访问页面时自动开始播放
在大多数情况下，Chromium 浏览器都不允许自动播放。但始终允许静音自动播放
在 autoplay=1 之后添加 mute=1，可让您的视频自动开始播放（但已静音）
<iframe width="420" height="345" src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>

添加 loop=1 会让视频永远循环
值 0（默认）：视频将播放一次
<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>

添加 controls=0 会使视频播放器不显示控件
<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>