HTML5中的视频和音频合编.pptx

HTML5中的视频和音频 本章内容 多媒体元素基本属性 多媒体元素常用方法 多媒体元素重要事件 使用多媒体元素播放文件 使用多媒体元素播放文件 为了在页面加载完成后实现自动播放功能，需要添加一个autoplay属性，并将该属性值设为true；默认值为false，表示不自动播放。 Controls属性表示显示音频元素自带的控制条工具。 设置video元素的大小和样式 设置video元素的大小和样式 带control的video poster属性 在video元素中，poster属性表示所选图片URL，如果添加该属性，将在视频文件播放前显示该图片。 poster属性示例 networkState属性 在video元素中，networkState属性返回视频文件的网络状态。当浏览器读取视频文件时，将触发一个progress事件，通过该事件，可以获取视频文件在被打开过程中，各个不同阶段的网络状态值。 networkState为只读属性，对应4个返回值 networkState属性示例 error属性 error属性是一个只读属性，在使用多媒体元素加载或读取文件过程中，如果出现异常，将触发元素的error事件。在该事件中，可以通过error属性返回一个MediaError对象，根据对象的code返回当前的错误值。 error属性示例 readyState属性 readyState属性返回当前播放文件的各种状态，可以反映媒体文件在播放过程中是否正常，该属性为可读属性。 currentTime,startTime,duration属性 currentTime属性返回媒体文件当前播放时间，也可以修改该时间属性，当前播放位置就指向所修改时间。 startTime属性返回多媒体元素开始播放时间，默认为0，该属性为只读属性。 duration属性返回多媒体元素总体播放时间 上述多媒体元素的属性值单位均为秒 currentTime,startTime,duration属性 played,paused,ended属性 played属性可以获取媒体文件已播放完成的时间段，played属性返回一个TimeRanges对象，通过该对象，可以获取已播放文件的开始时间和结束时间。 paused属性返回当前播放的文件是否处于暂停状态。 ended属性返回当前播放的文件是否已结束。 preload,autoplay,loop属性 preload属性表示在页面打开时，多媒体元素是否需要将指定的媒体文件进行预加载。 autoplay属性实现自动播放的功能 Loop循环播放 defaultPlaybackRate,playbackRate属性 defaultPlaybackRate返回默认的文件播放速度，一般情况下，属性值为1，也可以修改该属性值。 playbackRate返回当前正在播放的媒体文件的速度频率，默认值为1，可以修改该属性值，从而实现快进或慢进效果。 volumn,muted属性 Volumn表示媒体元素播放时的音量。取值范围为0~1,0为最低音量，1为最高音量。 Muted表示是否设置为静音。如果为true，表示静音。 自定义video元素控制条工具栏 自定义video元素控制条工具栏 canPlayType方法 canPlayType(type)方法可以检测当前浏览器是否支持媒体文件类型，其中type参数表示需要浏览器检测的类型，该方法返回如下三个值 canPlayType检测浏览器支持媒体类型 媒体播放事件 获取多媒体元素在播放事件中的不同状态 timeupdate事件 在媒体文件播放过程中，如果播放位置发生变化，就会触发该事件，利用该事件，结合多媒体元素的currentTime与duration属性，可以动态显示媒体文件播放的当前时间与总量时间。 通过timeupdate事件动态显示媒体文件播放时间