嵌入式内容：视频、音频和 Canvas

最简单的嵌入式（外部）内容是图像，使用 img 元素应用到网页上。在过去，object 配合各种插件和专有技术，被用来强制嵌入视频和音频。虽然并非没有（兼容性）问题，但现在有了一种更好的方法来在网页中使用各种类型的媒体。

视频

<video src="kitties.mp4" controls></video>

搞定。就是这么简单。

这将会在支持 HTML5 video 标签和视频内容类型的浏览器中嵌入一个带控件的视频。

controls 属性是可选的，但如果您不想要它 — 如果您真的想剥夺用户的控制权 — 您可以只添加一个 autoplay 属性。

<video src="kitties.mp4" autoplay></video>

这将在页面加载时播放视频，不显示任何控件，并且极有可能惹恼您的访问者。当然，如果您愿意，也可以同时放入 controls 和 autoplay 属性。

其他基本属性包括 width、height、loop 和 muted。

<video src="kitties.mp4" width="300" height="200" loop muted autoplay controls></video>

海报

您可以使用 poster 属性指定一个占位符图像，该图像将在视频播放前显示。

<video src="kitties.mp4" poster="fluffy.jpg" controls></video>

指定的图像将根据视频的尺寸拉伸或收缩以适应，无论图像的原始尺寸如何。

备用内容

所以，是的，有一个开始标签和一个结束标签。中间可以放什么？当然是备用内容：如果浏览器不理解 video 元素，就会显示这段内容。这可以是一些文字、一段 HTML，或者一张“非常搞笑”和“极具创意”的猫咪图片。

<video src="kitties.mp4" controls>
    <img src="hahahaha.jpg" alt="Hilarious cat and caption saying 'soz'.">
</video>

备选内容

如前所述，我们不仅需要担心标签的兼容性，还需要担心视频源本身的兼容性。幸运的是，可以使用 source 元素提供多个视频源文件，并在 type 属性的值中指示文件的要求。浏览器将选择它第一个兼容的。

<video controls>
    <source src="kitties.mp4" type="video/mp4; codecs='avc1, mp4a'">
    <source src="kitties.webm" type="video/webm; codecs='vp8.0, vorbis'">
    <p>Browser no likey HTML 5.</p>
</video>

在这里，浏览器应该判断它是否能够处理“video/mp4”MIME 类型以及是否具有指定的编解码器来解析它。如果没有，它应该继续尝试下一个，并使用第二个 source 元素中设置的详细信息。

音频

应用音频就像应用视频一样。使用 audio 标签，其结构与使用 video 相同，并且 src、controls、autoplay 和 loop 等属性都可以以相同的方式使用。

<audio src="meow_mix.mp3" controls>
    Your stupid browser doesn't support HTML 5 audio.
</audio>

备选内容也可以以与 video 和 source 标签完全相同的方式定义。

Canvas

HTML5 的一个主要新增功能是 canvas 元素。它旨在提供一个画布，JavaScript 可以在上面绘制各种动态图像，如图表、动画精灵或有趣的猫咪图片。

<canvas id="wittykitty" width="800" height="450">
    <!-- Fall-back content here, just like with video and audio -->
</canvas>

就这样。至少，这就是实际 HTML 的全部内容 — 真正的强大之处在于脚本。