HTML5中，video标签就可以播放视频，为什么还

HTML5中，video标签就可以播放视频，为什么还要嵌套source标签？

HTML5 中，虽然 <video> 标签可以播放视频，但浏览器对视频格式的支持却因厂商和版本的不同而异。这就是为什么我们需要使用 <source> 标签的原因。通过嵌套多个 <source> 标签，我们可以为浏览器提供多种视频格式，以确保在不同的浏览器中都能顺利播放。

当使用 <source> 标签时，浏览器会自动检查每个源，选择其支持的第一个格式进行播放。例如：

<video controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>您的浏览器不支持 HTML5 视频。</p>
</video>

在上面的示例中，浏览器首先尝试播放 WebM 格式的视频。如果不支持 WebM，它将尝试播放 MP4 格式的视频。如果两者都不支持，浏览器将显示一条消息告知用户。

使用 <source> 标签的另一个好处是，它允许我们为不同的网络条件或设备提供不同的视频质量。例如，我们可以为高分辨率屏幕提供高清视频，而为低分辨率屏幕提供较低质量的视频。

总之，虽然 <video> 标签可以播放视频，但使用 <source> 标签可以确保更好的兼容性和灵活性，以适应各种浏览器和设备。

网页中添加视频、声音、动画等，可以增强用户体验。在HTML5之前，为网页添加多媒体的唯一办法，就是使用第三方的插件（如，Adobe Flash等）。

HTML5中，提供了对多媒体的原生支持，只需通过 video 元素，就可以向网页嵌入视频、电影或音频资源，通过 audio 元素向网页嵌入音频资源，省时省力。

HTML中嵌入视频和音频代码

一、视频

在HTML5时代，在网页中嵌入视频非常简单，只需要一个 video 元素，并设置它的 src 属性，使其链接一个视频地址就可以完全搞定了，这个太esay了

把这个网站在IE8中打开一看，网站上除了一片空白外，什么也没有，这是为什么呢？

原来 video 是HTML5最新引入的元素，并不是所有浏览器都支持它，IE8及以下版本都无法识别 video 标签。如果浏览器不识别 video标签，则会忽略它，当做什么都没有。这就是网站上一片空白的原因。

这个问题好解决，只需在 video 标签之间放置文本信息，不支持 video 标签的老浏览器，会显示 video 标签之间的文本信息，以提示用户浏览器不支持 video，就这么简单！

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

在IE8上打开一看，确实显示了提示文本，这下好多了，至少用户知道自己的浏览器不能播放视频，该换浏览器了。

下载了Opera浏览器的最新版本25.0，打开一看，怎么还是一片空白外！Opera浏览器明明是支持video标签的，那又是为什么呢？

这个就得从视频的编码格式说起了。video 元素支持三种视频格式：Ogg、MP4、WebM。

Ogg是带有Theora视频编码和Vorbis音频编码的文件，后缀名为 .ogg；MP4是带有H.264视频编码和AAC音频编码的MP4文件，后缀名为 .mp4；WebM是VP8视频编码和Vorbis音频编码的文件，后缀名为 .webm。

这个Opera浏览器呢，它可以支持ogg，但不支持mp4。由于Opera支持video标签，故video标签之间的文本信息没有显示出来，但它不支持ogg，所以就不进行播放，最终导致页面出现一片空白。这下可怎么办呢？

其实办法有的是，我们可以从网上下载一副图像，放到视频播放窗口，如果视频无法播放，就显示这张图片，是不是更好呢？从网上下载一张美女图片，干脆叫beauty.jpg吧。那这个图像怎么添加到视频窗口呢？

video标签有个poster 属性，就是专门在视频窗口放置图片的。poster是一个video的占位符，无论什么情况下，只要视频还没有播放（视频下载过程中、视频不存在、不支持该视频类型、用户点击播放按钮前），就会显示该图像，可以看做是视频播放之前插入的宣传画或海报。

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

在Opera浏览器上刷新一下，真的有一个美女冲着自己微笑呢。虽然视频没有播放出来，这回心情却是好多了。

那我可不能一天到晚只看美女呀，视频还是还是要想办法播放出来的。既然Opera浏览器不支持mp4，我们就换成需要ogg吧，这样就肯定没问题了。

我想了想，这个办法不好，万一某个浏览器只支持支持ogg，不支持mp4呢。这年头，什么都缺，就是不缺点子，随便在网上一搜，办法就有了。

在 video 元素中添加 source 元素，就可以解决这个问题。在source 元素中，通过 src 属性指定视频的地址，通过 type 属性指定视频的类型，以帮助浏览器决定是否能播放该视频。并且，在 video 元素中可以添加任意多个source 元素，让不同的 source 元素链接到不同的视频文件。

这样的话，当浏览器发现 video 元素时，首先会查看它本身是否定义了 src 属性。如果没有，就会检查 source 元素。浏览器会逐个查看这些视频源，直到找到一个可以播放的视频。一旦找到，就会播放它并忽略其他的视频源。我们干脆添加两个source，一个是mp4，一个是ogg，这下视频是一定能播放出来了。

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

在Opera浏览器上又刷新一下，只有美女冲着我微笑，视频还是没播放出来。唉，太粗心了，忘记添加播放视频的控件了。

在video标签中，通过添加controls 属性来为视频添加播放控件，方便用户执行播放、暂停操作和音量控制。

（此处略去500字…）

</video>

在Opera浏览器上又刷新一下，效果真的不一样，这次不仅看到美女，还看到了视频控件。用鼠标猛戳一下那个播放按钮，哈哈，不错，真的听到美妙的旋律。我们的ogg文件，终于播放出来了，让我们好好享受一下吧O(∩_∩)O。

听了一会，忽然一想，不对呀，我刚才点了播放按钮后，等了半天才听到声音。能不能我一点播放按钮，就立即播放呢？

原来视频也是需要下载缓存的，点击播放按钮后，首先缓存，然后才播放的。那能不能在页面加载的同时就缓存呢。这样，用户点击播放后，就不必等待了。

这当然可以，在video标签中，通过添加preload属性来为视频添加预加载功能，在页面加载的同时加载视频。

（此处略去500字…）

</video>

关于 preload 属性，稍微再啰嗦一点，就是可以把它设置为 metadata，让浏览器仅仅预加载视频的基本信息，如尺寸、时长、以及一些关键的帧。这样的话，在开始播放之前，浏览器可以提前计算视频的显示尺寸。

既然一切都OK了！让我们看看mp4是不是能正常播放。下载最新版的Google Chrome 38.0浏览器，打开网页，猛戳一下播放按钮。

等等~，等等~，不对，怎么只有声音没有画面，明明是mp4格式的文件呀？使用暴风影音试了一下，是有画面的呀！

辛辛苦苦又在网上搜了一番，花了整整586秒，终于找到了答案。mp4视频需要h.264编码格式才会有图像的。

找了一个 h.264 编码格式的 mp4 试了一下，不错，确实有图像了！看了半天，原来是一部老外的电影，叽里咕噜一阵，一句话也没听懂。那O(∩_∩)O~，能否提供中文字幕呢，这样就不必费老大劲去听了！

HTML5中，通过在video元素添加track元素为视频添加字幕。字幕文件有两种格式：WebVTT和TTML。WebVTT是Web视频文本轨迹（Web Video Text Track），是UTF-8编码格式的文本文件；TTML是时序文本标记语言（Timed Text Markup Language），是XML格式的文件。两种文件的具体格式，已经超出我们的讨论范围。

video元素支持添加多个track元素，不同的track元素链接到不同的字幕文件。用户可以在各个字幕间进行切换。

</video>

track元素中，src属性指定字幕文件的URL；srclang属性字幕文件的语言类型，若kind 属性值是 "subtitles" 时，该属性必需的；label 属性指定字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时，会显示标签的名称；kind指定字幕内容类型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default属性指定是否是默认字幕，如果一个都没指定，将不会自动显示字幕。

除了字幕外，我还希望对视频进行过多的控制，比如让视频自动播放、循环播放、默认静音，以及视频窗口的尺寸等等，这些都能做到吗？

这已经不是什么事了，video 元素已经提供了相关属性，根据需要设置相应的属性就可以了。这些属性及含义见表 23：

HTML中嵌入视频和音频代码

哦，原来这么简单呀！那就到此为止吧，网页中嵌入视频的全部代码都在这里，就打包给你吧！

你的浏览器已经老掉牙了，不支持video，还不赶快使用现代浏览器O(∩_∩)O~！

</video>

睁大眼睛一看，却只有7行代码。然而，就这区区7行代码，可把他折磨得够呛。

看着这一切都全部搞定，他仰望着天空，长长呼了一口气，显得是那么的放松，那么的惬意。此时，他闭上眼睛，在自己的梦幻世界里遨游！

二、音频

有了在网页中嵌入视频的经历，要在网页中嵌入音频，那简直就是小菜一碟了。只要把vedio元素换成 audio 元素，就全部搞定。

但需要了解的是，audio 所支持的音频格式只有Ogg Vorbis、mp3 和 wav。还要知道，由于音频没有画面，也就没有 width、height、poster 属性，而其他属性都支持，并且跟视频的含义相同。

网页中嵌入音频的代码如下：

你的浏览器已经老掉牙了，不支持audio，还不赶快使用现代浏览器O(∩_∩)O~！

</audio>

读：您在智能手机，计算机，电视或平板电脑上观看的任何视频剪辑都具有特定类型的文件格式。如果您希望视频在任何平台上都能正常播放，则必须了解每种视频格式的工作原理。例如，用于Web开发的视频格式将不同于您用于社交媒体的格式。继续阅读以了解如何为您选择正确的格式。

首先让我们了解一下什么是视频文件格式？

1.容器和编解码器是任何视频文件的两个组成部分。视频格式是存储音频，视频，字幕和任何其他源数据的容器。编解码器对诸如音频和视频之类的多媒体数据进行编码和解码。

2.创建视频时，视频编解码器对视频进行编码和压缩，而音频编解码器对声音也是如此。之后，编码的视频和音频将同步并存储在媒体容器（文件格式）中。

下面我分别介绍一下8种常见的视频文件格式，编解码器和容器

1. MP4

MPEG-4 Part 14或MP4是2001年推出的最早的数字视频文件格式之一。大多数数字平台和设备都支持MP4。 MP4格式可以存储音频文件，视频文件，静止图像和文本。此外，MP4提供高质量的视频，同时保持相对较小的文件大小。

2. MOV

MOV是苹果设计的一种流行的视频文件格式。它旨在支持QuickTime播放器。 MOV文件包含视频，音频，字幕，时间码和其他媒体类型。它适用于Mac和Windows的不同版本的QuickTimePlayer。由于它是一种非常高质量的视频格式，因此MOV文件在计算机上会占用更多的存储空间。

3. WMV

WMV视频格式由Microsoft设计，并广泛用于Windows媒体播放器中。 WMV格式可提供比MP4更好的压缩小文件。这这个优势使它在在线视频流中很受欢迎。尽管它与苹果设备不兼容，但用户可以为iPhone或Mac下载Windows Media Player。

4. FLV

FLV是Adobe Flash Player使用的文件格式。它支持所有视频平台和浏览器，并且使用相当广泛，是用途最广泛的视频格式之一。 FLV格式是YouTube等在线视频流媒体平台的理想选择。它们的文件大小相对较小，因此易于下载。唯一的缺点是它与许多移动设备（如iPhone）不兼容。

5. AVI

AVI文件格式是Microsoft于1992年引入的，如今仍被广泛使用。 AVI视频格式使用的压缩比其他视频格式（例如MPEG或MOV）少。这将导致非常大的文件大小，每分钟视频大约2-3 GB。对于存储空间有限的用户来说可能是个问题。您也可以创建AVI视频文件而无需任何压缩，这使文件无损。无论您打开或保存文件多少次，无损文件都不会随着时间的流逝失去其质量。此外，这省去了在视频播放器中使用编解码器。

6. AVCHD（高级视频编码）

AVCHD是用于高清视频播放和数字录制的格式。这种视频格式是由Panasonic和Sony设计的，用于专业高清视频录制。通过利用H.264 / MPEG-4视频压缩技术，AVCHD还使您仅使用少量数据就可以存储数小时的高质量视频。此外，AVCHD 2.0格式的最新版本支持三维视频存储。

7. WebM

WebM由Google于2010年首次引入，是一种开放源代码视频格式，是在考虑互联网当前和未来状态的基础上开发的。 WebM适用于HTML5。 WebM的视频编解码器只需很少的计算机功能即可压缩和解压缩文件。此设计的目的是使几乎所有设备（例如平板电脑，台式机，智能手机或智能电视等设备）上的在线视频流式传输成为可能。

8. MKV

MKV文件格式在单个文件中合并了音频，视频和字幕。 MKV格式是为了将来的使用而开发的，这意味着视频文件将始终保持更新。 MKV容器几乎支持任何视频和音频格式，从而使该格式具有高度自适应性，与易用性。

结论—如何选择视频文件格式

您应该根据视频质量要求选择文件格式。视频应达到所需的质量，但不止于此。高质量的视频很难下载，转换，共享和管理。另外，您需要考虑如何查看视频文件。并非所有的浏览器，程序和设备都可以播放特定的视频格式。

选择视频格式之前，请考虑以下情况：

1.对于在线视频，请选择大多数网络浏览器支持的文件格式。这样，您的视频将在浏览器上本地播放。 MP4和WEBM是与浏览器兼容的视频格式。

2.对于家庭视频录像，请选择高质量的视频格式，以备将来使用。开源文件格式比企业控制的专有格式更具面向未来性。 MP4或AVI格式非常适合该类别。

3.对于Windows应用程序，请选择与Windows兼容的格式。在这种情况下，WMV是一个不错的选择。

本文由Victer科技情报局原创，欢迎关注，带你一起长知识！

在线咨询

上一篇：JS正则表达式完整教程（一）「值得收藏」
下一篇：Dreamweaver cs6 网页设计教程