《Web前端开发项目教程》网页中视音频的应用

项目10网页中视音频的应用任务10-1网页中视音频的应用

知识点了解video元素支持的视频格式了解audio元素支持的音频格式掌握在网页中引入音视频的标准方法及其属性技能点能够在网页中熟练加入音频能够在网页中熟练加入视频能够根据需要对音视频进行属性设置一、web上的视频在HTML5出现之前Web视频并没有一个标准，有些网站使用Flash插入视频，但是要求用户有Flash播放器；也有些网站使用Java播放器，但是要在JVM虚拟机中解码视频和音频需要用户拥有一台配置较高的机器。HTML5规定了一种通过video元素来包含视频的标准方法。video元素目前仅支持三种格式的视频文件。一、web上的视频——video元素支持的视频格式在HTML5中支持的视频格式主要包括Ogg、MPEG4、WebM等。Ogg：指带有Theora视频编码和Vorbis音频编码的Ogg文件。Ogg指一种文件封装容器，可以纳入各式各样自由和开放源代码的编解码器，包含音效、视频、文字与元数据的处理。其中，Theora是开源的免费的视频压缩编码技术，质量可以与主流的数字视频压缩编解码标准H.264相媲美；Vorbis是

Ogg的音频编码，类似于MP3等的音乐格式，但是它是完全免费、开放和没有专利限制的。一、web上的视频——video元素支持的视频格式MPEG4：指带有H.264视频编码和AAC音频编码的mpeg文件。同等条件下，mpeg4格式的视频质量较好，它的专利被MPEG-LA公司控制，任何支持播放mpeg4视频的设备，都必须拥有MPEG-LA颁发的许可证。mpeg4有3种编码，mpg4（xdiv），mpg4（xvid），avc（h264），h.264是公认的mp4标准编码，如果在网页开发中有浏览器不能识别的mpeg文件可以尝试用视频格式转换器转换一下格式。AAC是一种由MPEG-4标准定义的有损音频压缩格式，提供了目前最高的编码效率。WebM：指带有VP8视频编码和Vorbis音频编码的WebM文件。WebM由Google提出，是一个开放、免费的媒体文件格式，其中Google将其拥有的VP8视频编码技术开源，OggVorbis本来就是开放格式。WebM项目旨在为对每个人都开放的网络开发高质量、开放的视频格式，其重点是解决视频服务这一核心的网络用户体验。一、web上的视频——语法格式在html5中，Web开发者可以用一种标准的方式指定视频的外观。语法格式如下：<videosrc="视频文件"controls="controls"></video>使用<video>标签来定义视频播放器，不仅仅设置了要播放的视频文件，还包括视频的控制栏，例如播放、暂停、进度和音量控制、全屏等功能，更重要的是还可以自定义这些功能和控制栏的样式。一、web上的视频——video基本属性src和controls是<video>标签的基本属性，src属性用于设置视频文件的路径，controls属性用于为视频提供播放控件，并且<video></video>标签之间还可以插入文字，用于浏览器不能支持视频的时候显示。例如：<videosrc="vedio1.mp4"controls>浏览器不支持该视频，请下载最新版本的浏览器</video>注意：苹果操作系统的Safari浏览器只支持MP4类型，而ogg格式的视频则是适用于Firefox、Opera以及Chrome浏览器。IE8不支持video元素，IE9开始提供了对使用MPEG4的video元素的支持。一、web上的视频——source元素如果我们不确定自己的浏览器支持什么格式的视频，可以使用source元素给浏览器提供多种格式的视频文件选择。video元素允许嵌套多个source元素，source元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。例如：<videowidth="500"height="250"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">

您的浏览器不支持此种视频格式。</video>一、web上的视频——其他常用属性属性值描述width像素或百分比设置视频播放窗口的宽度height像素或百分比设置视频播放窗口的高度autoplayautoplay当页面载入完成后自动播放视频。looploop视频结束时重新开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。一、web上的视频——其他常用属性width、height属性用于设置视频播放窗口的宽高。在HTML5中，经常会通过为video元素添加宽高的方式给视频预留一定的空间，这样浏览器在加载页面时就会预先确定视频的尺寸，为其保留合适的空间，使页面的布局不产生变化。视频播放时有时上下还有黑边框，用户体验很不好。为了让视频在web端自适应，可以设置video标签属性宽度为100%，高度为auto,如下：video{/*width:100%*/max-width:100%;height:auto;}如果width属性设置为100%，视频播放器会根据屏幕大小自动调整比例，且可以比原始尺寸大；max-width属性设置为100%，视频播放器会根据屏幕自动调整比例，但不会超过其原始大小。一、web上的视频——其他常用属性autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉表示不自动播放。<videowidth="500"height="350"src="vedio1.mp4"autoplay="autoplay"></video>注意，表示自动播放时该属性要么没有值，要么其值恒等于属性名；而在标签中不使用该属性表示不自动播放。loop属性用于指定视频是否循环播放，同样也是一个布尔属性。<videowidth="500"height="350"src="vedio1.mp4"autoplayloop></video>一、web上的视频——其他常用属性preload属性用于定义视频是否预加载。有三个属性值可选择：none、metadata、auto。如果不使用此属性，默认为auto。<videosrc="vedio1.mp4"autoplaypreload="none"></video>none：不进行预加载。选择此属性值多数情况是开发者认为用户不期望此视频，或者为了减少HTTP请求。metadata：部分预加载。选用此属性值预先为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。auto：全部预加载。为用户预先加载了该视频。二、web上的音频HTML5出现之前在网页中播放音频也没有固定的标准，大多数音频是通过插件（如Flash）来播放的，但是并非所有浏览器都有同样的插件，尤其是主流浏览器已经纷纷宣布停止支持Flash插件，网站正在转向开放的web技术。HTML5规定了一种通过audio元素来包含音频的标准方法。二、web上的音频——audio元素支持的音频格式OggVorbis：OggVorbis是一种音频压缩格式，类似于MP3等音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是".ogg"，这种文件的设计格式非常先进，可以在未来的任何播放器上播放，因此，这种文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。MP3：是一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（MovingPictureExpertsGroupAudioLayerIII），简称为MP3。它被设计用来大幅度地降低音频数据量。wav：是录音时用的标准的Windows文件格式，文件的扩展名为“wav”，数据本身的格式为PCM或压缩型，属于无损音乐格式的一种。二、web上的音频——语法格式audio元素语法格式：<audiosrc="音频文件路径"controls>您的浏览器不支持audio标签</audio>src属性描述了音频文件的地址(URL)，controls属性规定浏览器为音频提供播放控件。二、web上的音频——语法格式属性值描述autoplayautoplay当页面载入完成后自动播放音频。looploop音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。audio其他常用属性二、web上的音频——音频中的source元素目前所有的主流PC、移动端浏览器的最新版已经全部支持了mp3格式，Ogg文件格式的音频可以在Firefox、Opera和Chrome浏览器下播放，如果要在InternetExplorer和Safari浏览器播放音频，则必须使用MP3文件。为了解决不同浏览器对音频文件的兼容性，在HTML5中，仍然可以运用source元素可以为audio元素提供多个备用文件。<audiocontrols="controls"> <sourcesrc="音频文件地址"type="媒体文件类型/格式"> <sou