的这两个元素并且能够支持音频、视频文件的编解码器即可。同时, 代码的书写方法也非常简单、清晰、简洁。 案例: 示例9-2:在HTML5页面中播放音频或视频 <html> <meta charset="utf-8 tte在HTML4页面中播放音频或视频文件</tte </head> <center> <h1>播放视频<h1> <video src="medias/WoWeiZiJiDaiYan-AD mp4"controls> 您的浏览器不支持vdeo元素 <h1>播放音频</h1> <audio src="medias/GeGe-Chang. mp3" controls> 您的浏览器不支持audo元素 </audio> body> </html> 由于目前浏览器能够支持的编解码器不一致,为了确保一个视频 能够同时被所有支持HTML5的浏览器支持,则可以通过< source>元 素来为同一个视频指定多个源,供不同的浏览器来选择适合自己的。 案例 示例9-3:使用多个源,在HIML5页面中播放音频或视频 <Doctype html> <meta charset="utf-8> <title>使用多个源,在HTML5页面中播放音频或视频文件</tte <center> <h1>播放视频</h1> 6《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
6 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 的这两个元素并且能够支持音频、视频文件的编解码器即可。同时， 代码的书写方法也非常简单、清晰、简洁。 案例： 示例 9-2：在 HTML 5 页面中播放音频或视频 <!doctype html> <html> <head> <meta charset="utf-8"> <title>在 HTML 4 页面中播放音频或视频文件</title> </head> <body> <center> <h1>播放视频</h1> <video src="medias/WoWeiZiJiDaiYan-AD.mp4" controls> 您的浏览器不支持 video 元素。 </video> <h1>播放音频</h1> <audio src="medias/GeGe-ChangShilei.mp3" controls> 您的浏览器不支持 audio 元素。 </audio> </center> </body> </html> 由于目前浏览器能够支持的编解码器不一致，为了确保一个视频 能够同时被所有支持 HTML 5 的浏览器支持，则可以通过<source>元 素来为同一个视频指定多个源，供不同的浏览器来选择适合自己的。 案例： 示例 9-3：使用多个源，在 HTML 5 页面中播放音频或视频 <!doctype html> <html> <head> <meta charset="utf-8"> <title>使用多个源，在 HTML 5 页面中播放音频或视频文件</title> </head> <body> <center> <h1>播放视频</h1>
<source src="medias/WoWeiZiJiDaiYan-AD mp4"type="video/mp4"> <source src="medias /WoWeiZiJiDaiYan-AD webm type="video/webm> <source src="medias/WoWeiziJiDaiYan-AD ogv" type"video/ogv"> 您的浏览器不支持vdeo元素 /video> <h1>播放音频</h1> <audio controls> <source src="medias/GeGe-ChangShilei mp3"type="audio/mp3"> <source src="medias/GeGe-ChangshileL ogg"type="audio/ogg"> 您的浏览器不支持audo元素。 </audio> </center> 三、 video和 audio的属性 video元素和 audio元素的属性大致相同。 3.lsrc 元素介绍: src属性用来指定媒体数据的URL地址 3. preload 元素介绍: 该属性中指定视频或者音频是否进行预加载。如果使用预加载 浏览器将会预先将视频或者音频进行缓冲,这样可以加快播放的速度。 因为在进行数据播放时,可能数据已经缓冲一部分或者缓冲完成。 preload属性值有三种: (1)none:表示不进行预先加载。 (2) metadata:表示只预先加载媒体的元数据,主要包括媒体 字节数、第一帧、播放列表、持续时间等信息 (3)auto:表示预加载全部视频或音频。该值是默认值, 7《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ labs. 51xueweb cn
7 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn <video> <source src="medias/WoWeiZiJiDaiYan-AD.mp4" type="video/mp4"> <source src="medias/WoWeiZiJiDaiYan-AD.webm" type="video/webm"> <source src="medias/WoWeiZiJiDaiYan-AD.ogv" type="video/ogv"> 您的浏览器不支持 video 元素。 </video> <h1>播放音频</h1> <audio controls> <source src="medias/GeGe-ChangShilei.mp3" type="audio/mp3"> <source src="medias/GeGe-ChangShilei.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素。 </audio> </center> </body> </html> 三、video 和 audio 的属性 video 元素和 audio 元素的属性大致相同。 3.1src 元素介绍： src 属性用来指定媒体数据的 URL 地址。 3.2preload 元素介绍： 该属性中指定视频或者音频是否进行预加载。如果使用预加载， 浏览器将会预先将视频或者音频进行缓冲，这样可以加快播放的速度。 因为在进行数据播放时，可能数据已经缓冲一部分或者缓冲完成。 preload 属性值有三种： （1）none：表示不进行预先加载。 （2）metadata：表示只预先加载媒体的元数据，主要包括媒体 字节数、第一帧、播放列表、持续时间等信息。 （3）auto：表示预加载全部视频或音频。该值是默认值
3. poster 元素介绍: 该属性为 vedio元素的独有属性,用来在视频不可用时,向用户 展示一张替代图片,从而避免视频不可用时,页面出现一片空白 3. loop 元素介绍: 该属性中指定是否循环播放视频或音频。 3. controls 元素介绍: 该属性中指定是否为视频或音频添加浏览器自带的播放用的控 制条。控制条中具有播放、暂停等按钮。不同的浏览器,自带的控制 条的样式不同。 可以通过撰写脚本的方式自定义控制条,而不使用浏览器默认的 控制条。 3.6 width和 height 元素介绍: 该属性为 vedio元素的独有属性。用来指定视频的宽度和高度。 3. error 元素介绍: 在读取、使用媒体数据的过程中,在正常情况下, video和 audio 元素的 error属性为nul1。当出现错误时, error属性将返回一个 Mediaerror对象,该对象通过code的方式将错误状态提供出来。错 误状态值为只读属性,且有4个可能值 (1)1: MEDIA ERR ABORTED,数据在下载中因为用户操作的原 因而被中止。 8《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
8 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 3.3poster 元素介绍： 该属性为 vedio 元素的独有属性，用来在视频不可用时，向用户 展示一张替代图片，从而避免视频不可用时，页面出现一片空白。 3.4loop 元素介绍： 该属性中指定是否循环播放视频或音频。 3.5controls 元素介绍： 该属性中指定是否为视频或音频添加浏览器自带的播放用的控 制条。控制条中具有播放、暂停等按钮。不同的浏览器，自带的控制 条的样式不同。 可以通过撰写脚本的方式自定义控制条，而不使用浏览器默认的 控制条。 3.6width 和 height 元素介绍： 该属性为 vedio 元素的独有属性。用来指定视频的宽度和高度。 3.7error 元素介绍： 在读取、使用媒体数据的过程中，在正常情况下，video 和 audio 元素的 error 属性为 null。当出现错误时，error 属性将返回一个 MediaError 对象，该对象通过 code 的方式将错误状态提供出来。错 误状态值为只读属性，且有 4 个可能值： （1）1：MEDIA_ERR_ABORTED，数据在下载中因为用户操作的原 因而被中止