向网页添加音频和视频

使用 HTML5 可以更轻松地向网页添加音频和视频。 现代浏览器原生的 audiovideo 支持让你无需借助其他软件即可添加媒体元素,并对它们添加样式和进行编程。

本节内容

主题描述

向网页添加音频播放器

通过使用 HTML5,你无需任何第三方插件或外接程序,就可以向你的网页添加音乐播放器。

如何使用 HTML5 在网页上播放视频文件

使用 HTML5 视频,可以在网页上添加和控制视频内容,而无需外部控件或插件。

使你的视频可通过计时文本轨道访问

随 HTML5 视频元素一起提供的计时文本轨道 API 提供了一种用于向视频添加辅助功能、翻译脚本或扩展内容的工具。

 

简介

传统上,向网页添加媒体涉及从多种方案进行选择以添加声音和视频。其中多数媒体支持均要求使用一些额外的、需要经常更新的软件,有时难以编程,且在集成到网页方面可能受到限制。HTML5 原生的音频和视频支持将为你解除在添加多媒体时遇到的困扰。

HTML5 规范简要介绍了一些音频和视频元素,以及一些可用作网页中其他任何元素的关联属性和方法。随着浏览器支持的改进和规范的成熟,我们得以创建内容更吸引人的网页。例如,可以通过使用多个 audio 元素,让你的网页使用多种不同的乐器分别在不同的音轨上播放歌曲。

向网页添加视频元素时,可以显示一个占位符图像、使用级联样式表 (CSS) 为元素添加样式,还可以在不同的原生控件中进行选择,或创建你自己的控件。使用相应的方法、事件和属性可以开始和停止播放、查找和更改内容,或者在多个音轨之间切换。

使用 track 元素可以方便地向视频中添加隐藏式字幕,只需创建一个简单的文本文件并指定该文件即可。视频元素可处理所有正在同步的内容及显示。如果希望自己来显示字幕,也可以使用 API 在脚本中实现。

当你在编写 HTML5 音频和视频脚本时,你会发现这两个过程使用的许多方法和属性都是相同的。如果已了解如何编写在音频开始和停止时引发的事件,便可在视频脚本中重复使用该代码。

下列链接将帮助你深入了解 HTML5 音频和视频,以牢牢吸引住网站受众的眼球。

汲取灵感

在消化了以上基础知识之后,你可以看看下列富有创意的文章,其中深入介绍了有关 HTML5 视频和音频的性能、最佳做法及其他操作。

开启 HTML5 音频的强大功能快速简要地了解如何在页面上添加和初始化 audio 元素。 接着,了解几种不同的预加载内容的方法及其对性能的影响。其中的一个多音轨音乐示例将展示如何循环音频内容和如何同步多个音轨。最后,还提供了一些真实的网站示例,它们各富创意地采用了 HTML5 audio 元素,以便你从中汲取启发和灵感。
HTML5 原生音频介绍 HTML5 audio 元素和 API 与一些主要浏览器的兼容性。你还将了解如何使用多个编解码器支持、设置 MIME 类型,以及当加载网页的浏览器不支持 HTML5 音频时如何创建回退。
让你的 HTML5 视频在移动设备上播放显示如何在旅途中播放视频内容。文章在介绍 HTML5 视频的同时还介绍了其他用于满足兼容性的备用选项。 作者还指出了一些即使是老练的编程者也可能会犯的编程错误。
HTML5 视频字幕制作工具使用该工具可轻松创建 Web 视频文本跟踪 (WebVTT) 和计时文本标记语言 (TTML) 格式的文本文件。

 

查看代码的效果

下面提供了一些精彩的演示,它们将向你介绍使用 HTML5 音频和视频可以做些什么。使用 F12 开发者工具和脚本选项卡可了解这些演示背后的代码。有关 F12 工具的详细信息,请参阅如何使用 F12 开发者工具调试网页

IE10 视频字幕演示如何使用 <track> 元素向 HTML5 视频添加隐藏式字幕。
IE Beatz一个面向专业及业余鼓手的有趣演示,介绍如何使用多个 audio 元素将声音分层。
HTML5 音频播放器 + XML 播放列表此演示将 HTML5 音频与用于播放列表的原生 XML 和用于控件的可缩放矢量图形 (SVG) 相结合。

 

 

 

显示:
© 2014 Microsoft