目录1. web中的音频和视频1.1 \video\元素1.2 使用多个播放源以提高兼容性1.2.1 媒体文件的内容1.2.2 浏览器所支持的媒体文件1.3 其他\video\特性1.4 \audio\元素2. 显示视频文本参考1. web中的音频和视频最早的在线视频和音频的流行得益于专有的基于插件的技术如Flash和Silverlight。这两种技术存在安全性和无障碍问题现已过时取而代之的是原生的HTML解决方案该解决方案包括video和audio元素以及用于控制它们的JavaScript API。1.1 video元素可以借助video元素来轻松地嵌入视频。videosrcrabbit320.webmcontrolsp你的浏览器不支持 HTML 视频。可点击ahrefrabbit320.mp4此链接/a观看。/p/video值得注意的特性有src同img元素的使用方式相同src属性指向你想要嵌入到网页中的视频资源它们的运作方式完全相同。controls用户应当能够控制视频和音频的播放。你必须使用controls属性来让视频或音频包含浏览器自带的控制界面或者使用适当的JavaScript API构建自己的界面。至少界面必须包括启动和停止媒体以及调整音量的方法。video元素内的段落这个叫做后备内容当浏览器不支持video元素的时候就会显示这段内容借此我们能够对旧的浏览器提供回退。你可以添加任何后备内容在这个例子中我们提供了一个指向这个视频文件的链接从而使用户至少可以访问到这个文件而不会局限于浏览器的支持。1.2 使用多个播放源以提高兼容性以上的例子中有一个问题那就是不同浏览器对视频/音频格式的支持程度不一样导致你可能无法播放某些视频/音频。幸运的是你有办法防止这个问题发生。1.2.1 媒体文件的内容像MP3、MP4还有WebM这些格式叫做容器格式。它们定义了构成媒体文件的音频轨道和视频轨道的储存结构其中还包含描述这个媒体文件的元数据以及使用什么编解码器对其通道进行编码等等。一个包含电影的WebM文件其主要包括一个主视频轨道和一个备用视角轨道以及相应的英语和西班牙语音轨还有英语解说音轨。文件还包括用于电影的闭路字幕文本轨道、西班牙语字幕以及解说的英文字幕。容器中的音频和视频轨道存储着按照相应编解码器格式编码的数据。音频轨道使用不同于视频轨道的格式进行编码。每条音频轨道都采用音频编解码器编码而视频轨道则使用视频编解码器编码。不同浏览器支持不同的视频和音频格式以及不同的容器格式这些容器可以包含不同类型的视频和音频。WebM容器通常包括了Vorbis或Opus音频和VP8/VP9视频。这在所有的现代浏览器中都支持除了某些老版本浏览器。MP4容器通常包括AAC或MP3音频和H.264视频。这在所有浏览器中都支持。Ogg容器倾向于使用Vorbis音频和Theora视频。其在Firefox和Chrome当中受到完美的支持不过这个容器已经被更强大的WebM格式所取代。对于某些类型的音频通常编解码器的数据存储没有容器或简化容器。FLAC编解码器它通常存储在FLAC文件中FLAC文件只是FLAC的原始轨迹。MP3文件实际上是存储在MPEG或MPEG-2容器中的MPEG-1音频层III音频轨道。因为尽管大多数浏览器不支持在video和audio元素中使用MPEG媒体但由于MP3的流行它们可能仍然支持MP3。音频播放器倾向于直接播放音频例如MP3和Ogg文件。它们不需要容器。1.2.2 浏览器所支持的媒体文件编解码器主要用于将音频和视频压缩成可管理的文件。浏览器支持多种编解码器它们用于已压缩的音视频与二进制数据的相互转换。不同的编解码器和不同的容器都有各自的优缺点这会影响你做出选择。由于每种浏览器支持的容器文件格式和编解码器都有所不同情况变得更加复杂。为了尽可能确保你的网站或应用能在用户的浏览器上正常工作你可能需要提供多种格式的媒体文件。如果你的网站没有提供任何用户的浏览器支持的格式那么你的媒体内容将无法播放。由于确保你的应用程序中的媒体内容能在你想要覆盖的每一种浏览器、平台和设备上都正常显示有些复杂因此选择最合适的编解码器和容器组合可能会是一项挑战。移动浏览器和桌面浏览器对格式的支持可能不一样。此外桌面和移动浏览器都可能外包媒体播放处理。因此媒体支持在一定程度上依赖于用户安装了哪些软件。videocontrolssourcesrcrabbit320.mp4typevideo/mp4/sourcesrcrabbit320.webmtypevideo/webm/p你的浏览器不支持此视频。可点击ahrefrabbit320.mp4此链接/a观看/p/video在这里我们将src属性从video元素中移除转而将它放在几个单独的source元素当中这些元素分别指向各自的资源。在本例当中浏览器会检查source元素并且播放第一个与其自身codec相匹配的媒体。WebM和MP4这两种格式在目前已经足够只要视频支持这两种格式那么其在大多数平台和浏览器上都能正常播放。每个source元素都含有type属性这个属性是可选的但是建议你添加这个属性——它包含了source指定的MIME类型同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果没有添加type属性浏览器会尝试加载每一个文件直到找到一个能正确播放的格式但是这样会消耗掉大量的时间和资源。1.3 其他video特性videocontrolswidth400height400autoplayloopmutedpreloadautoposterposter.pngsourcesrcrabbit320.mp4typevideo/mp4/sourcesrcrabbit320.webmtypevideo/webm/p你的浏览器不支持此视频。可点击ahrefrabbit320.mp4此链接/a观看/p/videowidth和height你可以用属性控制视频的尺寸也可以用CSS来控制视频尺寸。无论使用哪种方式视频都会保持它原始的长宽比——也叫做横纵比。如果你设置的尺寸没有保持视频原始长宽比那么视频边框将会拉伸而未被视频内容填充的部分将会显示默认的背景颜色。autoplay这个属性会使音频和视频内容立即播放即使页面的其他部分还没有加载完全。建议不要在你的网站上自动播放视频或音频因为用户可能会反感。loop这个属性可以让视频或者音频文件在结束时再次开始播放。这个也可能会恼人同样不建议使用除非有必要。muted这个属性会导致媒体播放时默认关闭声音。poster这个属性指向一个图像的URL这个图像会在视频播放前显示。通常用于粗略的预览或者广告。preload这个属性被用来缓冲较大的文件有三个值可选“none”不缓冲文件。“auto”页面加载后缓存媒体文件。“metadata”仅缓冲文件的元数据。1.4 audio元素audio元素与video元素的使用方式几乎完全相同只有一些细微的差别比如下面的边框不同一个典型的例子如下audiocontrolssourcesrcviper.mp3typeaudio/mp3/sourcesrcviper.oggtypeaudio/ogg/p你的浏览器不支持此音频可点击ahrefviper.mp3此链接/a收听。/p/audio因为音频播放器没有视觉部件它所占用的空间比视频播放器要小。其他一些HTMLaudio和video的差异如下audio元素不支持width/height属性——由于其并没有视觉部件也就没有内容要设置width/height。它同时也不支持poster属性——同样因为没有视觉部件。除此之外audio元素支持所有video元素的特性。2. 显示视频文本许多人不想听到Web上的音频/视频内容至少在某些情况下是这样的比如许多人患有听觉障碍他们不能听见音频中的声音。还有一些人无法听音频因为他们在一个非常嘈杂的环境当中。在某些环境下播放音频会分散注意力或造成干扰这种情况下拥有字幕就显得非常实用了。有一些人他们不会说视频当中的语言因此他们需要文字记录或者是翻译来帮助他们理解媒体内容。为这些人提供音频/视频中话语的文字记录将会对他们有很大的帮助。幸运的是借助HTML视频我们可以做到这一点。我们只需使用WebVTT文件格式和track元素即可。WebVTT是一个格式用来编写文本文件这个文本文件中包含了众多的字符串这些字符串会带有一些元数据它们可以用来描述这个字符串将会在视频中显示的时间甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做cue你可以根据不同的需求来显示不同类型的cue最常见的如下subtitles外语材料的翻译字幕来帮助那些听不懂音频中说的什么的人理解音频当中的内容。captions同步翻译对白或是描述一些有重要信息的声音来帮助那些不能听音频的人理解音频中的内容。定时描述由媒体播放器朗读的文本其向盲人或其他视力受损用户描述重要的视觉内容。一个典型的WebVTT文件如下1 00:00:22.230 --- 00:00:24.606 第一段字幕 2 00:00:30.739 --- 00:00:34.074 第二段字幕 ...要让其与HTML媒体一起显示你需要做如下工作1. 将其保存为.vtt文件放在服务器可以提供服务的地方例如和HTML文件放在同一文件夹。2. 用track标签链接.vtt文件track标签需放在audio或video标签当中同时需要放在所有source标签之后。使用kind属性来指明是subtitles、captions还是descriptions。然后使用srclang来告诉浏览器你是用什么语言来编写的subtitles。最后添加label以帮助读者在查找时识别语言。videocontrolssourcesrcexample.mp4typevideo/mp4/sourcesrcexample.webmtypevideo/webm/trackkindsubtitlessrcsubtitles_es.vttsrclangeslabelSpanish//video参考1、视频和音频内容 10、HTML入门——视频和音频内容
目录1. web中的音频和视频1.1 \video\元素1.2 使用多个播放源以提高兼容性1.2.1 媒体文件的内容1.2.2 浏览器所支持的媒体文件1.3 其他\video\特性1.4 \audio\元素2. 显示视频文本参考1. web中的音频和视频最早的在线视频和音频的流行得益于专有的基于插件的技术如Flash和Silverlight。这两种技术存在安全性和无障碍问题现已过时取而代之的是原生的HTML解决方案该解决方案包括video和audio元素以及用于控制它们的JavaScript API。1.1 video元素可以借助video元素来轻松地嵌入视频。videosrcrabbit320.webmcontrolsp你的浏览器不支持 HTML 视频。可点击ahrefrabbit320.mp4此链接/a观看。/p/video值得注意的特性有src同img元素的使用方式相同src属性指向你想要嵌入到网页中的视频资源它们的运作方式完全相同。controls用户应当能够控制视频和音频的播放。你必须使用controls属性来让视频或音频包含浏览器自带的控制界面或者使用适当的JavaScript API构建自己的界面。至少界面必须包括启动和停止媒体以及调整音量的方法。video元素内的段落这个叫做后备内容当浏览器不支持video元素的时候就会显示这段内容借此我们能够对旧的浏览器提供回退。你可以添加任何后备内容在这个例子中我们提供了一个指向这个视频文件的链接从而使用户至少可以访问到这个文件而不会局限于浏览器的支持。1.2 使用多个播放源以提高兼容性以上的例子中有一个问题那就是不同浏览器对视频/音频格式的支持程度不一样导致你可能无法播放某些视频/音频。幸运的是你有办法防止这个问题发生。1.2.1 媒体文件的内容像MP3、MP4还有WebM这些格式叫做容器格式。它们定义了构成媒体文件的音频轨道和视频轨道的储存结构其中还包含描述这个媒体文件的元数据以及使用什么编解码器对其通道进行编码等等。一个包含电影的WebM文件其主要包括一个主视频轨道和一个备用视角轨道以及相应的英语和西班牙语音轨还有英语解说音轨。文件还包括用于电影的闭路字幕文本轨道、西班牙语字幕以及解说的英文字幕。容器中的音频和视频轨道存储着按照相应编解码器格式编码的数据。音频轨道使用不同于视频轨道的格式进行编码。每条音频轨道都采用音频编解码器编码而视频轨道则使用视频编解码器编码。不同浏览器支持不同的视频和音频格式以及不同的容器格式这些容器可以包含不同类型的视频和音频。WebM容器通常包括了Vorbis或Opus音频和VP8/VP9视频。这在所有的现代浏览器中都支持除了某些老版本浏览器。MP4容器通常包括AAC或MP3音频和H.264视频。这在所有浏览器中都支持。Ogg容器倾向于使用Vorbis音频和Theora视频。其在Firefox和Chrome当中受到完美的支持不过这个容器已经被更强大的WebM格式所取代。对于某些类型的音频通常编解码器的数据存储没有容器或简化容器。FLAC编解码器它通常存储在FLAC文件中FLAC文件只是FLAC的原始轨迹。MP3文件实际上是存储在MPEG或MPEG-2容器中的MPEG-1音频层III音频轨道。因为尽管大多数浏览器不支持在video和audio元素中使用MPEG媒体但由于MP3的流行它们可能仍然支持MP3。音频播放器倾向于直接播放音频例如MP3和Ogg文件。它们不需要容器。1.2.2 浏览器所支持的媒体文件编解码器主要用于将音频和视频压缩成可管理的文件。浏览器支持多种编解码器它们用于已压缩的音视频与二进制数据的相互转换。不同的编解码器和不同的容器都有各自的优缺点这会影响你做出选择。由于每种浏览器支持的容器文件格式和编解码器都有所不同情况变得更加复杂。为了尽可能确保你的网站或应用能在用户的浏览器上正常工作你可能需要提供多种格式的媒体文件。如果你的网站没有提供任何用户的浏览器支持的格式那么你的媒体内容将无法播放。由于确保你的应用程序中的媒体内容能在你想要覆盖的每一种浏览器、平台和设备上都正常显示有些复杂因此选择最合适的编解码器和容器组合可能会是一项挑战。移动浏览器和桌面浏览器对格式的支持可能不一样。此外桌面和移动浏览器都可能外包媒体播放处理。因此媒体支持在一定程度上依赖于用户安装了哪些软件。videocontrolssourcesrcrabbit320.mp4typevideo/mp4/sourcesrcrabbit320.webmtypevideo/webm/p你的浏览器不支持此视频。可点击ahrefrabbit320.mp4此链接/a观看/p/video在这里我们将src属性从video元素中移除转而将它放在几个单独的source元素当中这些元素分别指向各自的资源。在本例当中浏览器会检查source元素并且播放第一个与其自身codec相匹配的媒体。WebM和MP4这两种格式在目前已经足够只要视频支持这两种格式那么其在大多数平台和浏览器上都能正常播放。每个source元素都含有type属性这个属性是可选的但是建议你添加这个属性——它包含了source指定的MIME类型同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果没有添加type属性浏览器会尝试加载每一个文件直到找到一个能正确播放的格式但是这样会消耗掉大量的时间和资源。1.3 其他video特性videocontrolswidth400height400autoplayloopmutedpreloadautoposterposter.pngsourcesrcrabbit320.mp4typevideo/mp4/sourcesrcrabbit320.webmtypevideo/webm/p你的浏览器不支持此视频。可点击ahrefrabbit320.mp4此链接/a观看/p/videowidth和height你可以用属性控制视频的尺寸也可以用CSS来控制视频尺寸。无论使用哪种方式视频都会保持它原始的长宽比——也叫做横纵比。如果你设置的尺寸没有保持视频原始长宽比那么视频边框将会拉伸而未被视频内容填充的部分将会显示默认的背景颜色。autoplay这个属性会使音频和视频内容立即播放即使页面的其他部分还没有加载完全。建议不要在你的网站上自动播放视频或音频因为用户可能会反感。loop这个属性可以让视频或者音频文件在结束时再次开始播放。这个也可能会恼人同样不建议使用除非有必要。muted这个属性会导致媒体播放时默认关闭声音。poster这个属性指向一个图像的URL这个图像会在视频播放前显示。通常用于粗略的预览或者广告。preload这个属性被用来缓冲较大的文件有三个值可选“none”不缓冲文件。“auto”页面加载后缓存媒体文件。“metadata”仅缓冲文件的元数据。1.4 audio元素audio元素与video元素的使用方式几乎完全相同只有一些细微的差别比如下面的边框不同一个典型的例子如下audiocontrolssourcesrcviper.mp3typeaudio/mp3/sourcesrcviper.oggtypeaudio/ogg/p你的浏览器不支持此音频可点击ahrefviper.mp3此链接/a收听。/p/audio因为音频播放器没有视觉部件它所占用的空间比视频播放器要小。其他一些HTMLaudio和video的差异如下audio元素不支持width/height属性——由于其并没有视觉部件也就没有内容要设置width/height。它同时也不支持poster属性——同样因为没有视觉部件。除此之外audio元素支持所有video元素的特性。2. 显示视频文本许多人不想听到Web上的音频/视频内容至少在某些情况下是这样的比如许多人患有听觉障碍他们不能听见音频中的声音。还有一些人无法听音频因为他们在一个非常嘈杂的环境当中。在某些环境下播放音频会分散注意力或造成干扰这种情况下拥有字幕就显得非常实用了。有一些人他们不会说视频当中的语言因此他们需要文字记录或者是翻译来帮助他们理解媒体内容。为这些人提供音频/视频中话语的文字记录将会对他们有很大的帮助。幸运的是借助HTML视频我们可以做到这一点。我们只需使用WebVTT文件格式和track元素即可。WebVTT是一个格式用来编写文本文件这个文本文件中包含了众多的字符串这些字符串会带有一些元数据它们可以用来描述这个字符串将会在视频中显示的时间甚至可以用来描述这些字符串的样式以及定位信息。这些字符串叫做cue你可以根据不同的需求来显示不同类型的cue最常见的如下subtitles外语材料的翻译字幕来帮助那些听不懂音频中说的什么的人理解音频当中的内容。captions同步翻译对白或是描述一些有重要信息的声音来帮助那些不能听音频的人理解音频中的内容。定时描述由媒体播放器朗读的文本其向盲人或其他视力受损用户描述重要的视觉内容。一个典型的WebVTT文件如下1 00:00:22.230 --- 00:00:24.606 第一段字幕 2 00:00:30.739 --- 00:00:34.074 第二段字幕 ...要让其与HTML媒体一起显示你需要做如下工作1. 将其保存为.vtt文件放在服务器可以提供服务的地方例如和HTML文件放在同一文件夹。2. 用track标签链接.vtt文件track标签需放在audio或video标签当中同时需要放在所有source标签之后。使用kind属性来指明是subtitles、captions还是descriptions。然后使用srclang来告诉浏览器你是用什么语言来编写的subtitles。最后添加label以帮助读者在查找时识别语言。videocontrolssourcesrcexample.mp4typevideo/mp4/sourcesrcexample.webmtypevideo/webm/trackkindsubtitlessrcsubtitles_es.vttsrclangeslabelSpanish//video参考1、视频和音频内容