HTML5与CSS3 Web前端开发技术第5章 HTML5的Video元素和Audio元素.pptVIP

HTML5+CSS3 Web 前端开发技术 LOGO HTML5+CSS3 Web 前端开发技术 * 第5章 HTML5的Video元素和Audio元素 HTML5的Video元素 1 HTML5的Audio元素 2 使用track元素添加字幕 3 5.1 HTML5的Video元素 1.使用video标记插入视频 video src=url controls=controls替代文字/video 表5-1 video标记常用属性及说明 属性 值 说明 src url 要播放视频的URL autoplay autoplay 视频就绪后立刻播放 controls controls 添加播放、暂停和音量等控件 width 像素 设置视频播放器的宽度 height 像素 设置视频播放器的高度 loop loop 设置视频是否循环播放 preload auto/none/metadata 视频在页面加载时开始加载，并预备播放 startTime 读取媒体的开始播放时间，通常为0 currentTime 读取或修改媒体的当前播放位置 duration 读取媒体总的播放时间 volume 0~1 读取或修改媒体的播放音量 muted true/false 读取或修改媒体的静音状态 5.1 HTML5的Video元素 插入视频示例demo0501.html 5.1 HTML5的Video元素 2. video元素的访问控制 video元素重要的方法和事件。调用这些方法和事件可以访问和控制video对象。 表5-3 video标记常用方法和事件 方法/事件 功能 play() 播放媒体，paused属性的值自动修改为false pause() 暂停播放，paused属性的值自动修改为true load() 重新载入媒体进行播放 play事件 执行play()方法时触发 pause事件 执行pause()方法时触发 error事件 获取媒体数据错误时触发 timeupdate事件 当前播放位置发生改变时触发 durationchange事件 播放时长被改变 5.1 HTML5的Video元素 video元素的访问控制示例demo0502.html 5.1 HTML5的Video元素 video访问控制示例demo0503.html 5.1 HTML5的Video元素 2. video元素的访问控制 video元素的访问控制示例demo0504.html 5.2 HTML5的Audio元素 1.使用audio标记插入音频 audio src=“url” controls=“controls”替代内容/audio 属性 值 说明 src url 要播放音频的URL autoplay autoplay 音频就绪后马上播放 controls controls 向用户显示控件，例如播放、暂停、进度条等 loop loop 设置音频是否循环播放 preload preload 音频在页面加载时进行加载，并预备播放 表5-4 audio标记的常用属性、取值及说明 5.2 HTML5的Audio元素 audio标记插入音频示例demo0503.html 5.2 HTML5的Audio元素 2. audio元素的访问控制 audio元素通过单击按钮触发对象的play()方法和pause()方法实现播放状态的改变，而音量和静音控制则是通过修改对象的volume属性和muted属性实现。 示例demo0506.html 5.3 使用track元素添加字幕 1.使用track标记插入字幕文件 track元素是video元素的子元素， track标记必须被书写在 video元素的开始标记与结束标记之间。 属性 说明 src属性 src属性指定字幕文件的存放路径，该属性是必选项。属性值可以是一个绝对URL路径，也可以是一个相对URL路径。 srclang属性 srclang属性用于指定字幕文件的语言。例如，srclang=en 和srclang=zh-cn分别表示字幕文件为英语和汉语。 default属性 default属性用于通知浏览器在用户没有选择使用其他字幕文件的时候可以使用当前 track文件 kind属性 kind属性用于指定字幕文件(即用于存放字幕、章节标题、说明文字或元数据的文件) 的种类。属性值为subtitles、captions、descriptions、chapters与metadata 表5-6 track标记的常用属性及说明 5.3 使用track元素添加字幕 track标记插入字幕文件示例demo0507.html 5.3 使用track元素添加字幕 2.建立WebVTT文件