HTML第5章-HTML5的Video元素和Audio元素课件

第第5章章 HTML5的的Video元素和元素和Audio元素元素HTML5的的Video元素元素1HTML5的的Audio元素元素2使用使用track元素添加字幕元素添加字幕35.1 HTML5的Video元素1.使用使用video标记插入视频标记插入视频替代文字替代文字表表5-1 标记常用属性及说明标记常用属性及说明属性属性值说明明srcurl要播放要播放视频的的URLautoplayautoplay视频就就绪后立刻播放后立刻播放controls controls添加播放、添加播放、暂停和音量等控件停和音量等控件width像素像素设置置视频播放器的播放器的宽度度height 像素像素设置置视频播放器的高度播放器的高度looploop设置置视频是否循是否循环播放播放preloadauto/none/metadata视频在在页面加面加载时开始加开始加载，并，并预备播放播放startTime读取媒体的开始播放取媒体的开始播放时间，通常，通常为0currentTime读取或修改媒体的当前播放位置取或修改媒体的当前播放位置duration读取媒体取媒体总的播放的播放时间volume01读取或修改媒体的播放音量取或修改媒体的播放音量mutedtrue/false读取或修改媒体的静音状取或修改媒体的静音状态5.1 HTML5的Video元素插入视频示例插入视频示例demo0501.html5.1 HTML5的Video元素2.video元素的访问控制元素的访问控制 video元素重要的方法和事件。调用这些方法和事件可以元素重要的方法和事件。调用这些方法和事件可以访问和控制访问和控制video对象。对象。表表5-3 标记常用方法和事件标记常用方法和事件方法/事件功能play()播放媒体，paused属性的值自动修改为falsepause()暂停播放，paused属性的值自动修改为trueload()重新载入媒体进行播放play事件执行play()方法时触发pause事件执行pause()方法时触发error事件获取媒体数据错误时触发timeupdate事件当前播放位置发生改变时触发durationchange事件播放时长被改变5.1 HTML5的Video元素video元素的访问控制示例元素的访问控制示例demo0502.html5.1 HTML5的Video元素video访问控制示例访问控制示例demo0503.html5.1 HTML5的Video元素2.video元素的访问控制元素的访问控制 video元素的访问控制示例元素的访问控制示例demo0504.html5.2 HTML5的Audio元素1.使用使用audio标记插入音频标记插入音频替代内容属性属性值值说明说明srcurl要播放音频的要播放音频的URLautoplayautoplay音频就绪后马上播放音频就绪后马上播放controls controls向用户显示控件，例如播放、暂停、进度条等向用户显示控件，例如播放、暂停、进度条等looploop设置音频是否循环播放设置音频是否循环播放preloadpreload音频在页面加载时进行加载，并预备播放音频在页面加载时进行加载，并预备播放表表5-4 标记的常用属性、取值及说明标记的常用属性、取值及说明5.2 HTML5的Audio元素 audio标记插入音频示例标记插入音频示例5.2 HTML5的Audio元素2.audio元素的访问控制元素的访问控制通过单击按钮触发对象的play()方法和pause()方法实现播放状态的改变；音量和静音控制则是通过修改对象的volume属性和muted属性实现。示例示例demo0506.html5.3 使用使用track元素添加字幕元素添加字幕1.使用使用track标记插入字幕文件标记插入字幕文件 track元素是元素是video元素的子元素，元素的子元素，标记必须被书写标记必须被书写在在 video元素的开始标记与结束标记之间。元素的开始标记与结束标记之间。属性属性说明说明src属性属性指指定定字字幕幕文文件件的的存存放放路路径径，是是必必选选项项。属属性性值值可可以以是是绝绝对对URL路路径径或或相对相对URL路径。路径。srclang属性属性用用于于指指定定字字幕幕文文件件的的语语言言。例例如如，srclang=zh-cn表表示示字字幕幕文文件为件为英语。英语。default属性属性用用于于通通知知浏浏览览器器在在用用户户没没有有选选择择使使用用其其他他字字幕幕文文件件的的时时候候可可以以使使用用当前当前 track文件文件kind属性属性用用 于于 指指 定定 字字 幕幕 文文 件件。属属 性性 值值 为为 subtitles、captions、descriptions、chapters与与metadata表表5-6 标记的常用属性及说明标记的常用属性及说明5.3 使用使用track元素添加字幕元素添加字幕track标记插入字幕文件示例标记插入字幕文件示例demo0507.html5.3 使用使用track元素添加字幕元素添加字幕2.建立建立WebVTT文件文件track元素引用的文件是内部包含了一系列时间标记的文本文件，WebVTT文件是可以添加到轨道中的视频播放器可以显示的文本文件。在 HTML5中通过标记引用WebVTT文件，这表示可以为音频或视频等媒体资源提供诸如字幕、标题或描述等信息，并将这些信息同步显示在媒体资源中。（1）WebVTT文件格式文件格式WebVTT(Web Video Text Tracks)是一种文件格式，本是一种文件格式，本质上是是一种文本文件，使用质上是是一种文本文件，使用UTF-8编码，文件扩展名为编码，文件扩展名为.vtt。5.3 使用使用track元素添加字幕元素添加字幕（2）WebVTT标记标记WebVTT文件内容由一些WebVTT标记组成，标记之间用行分隔符分开。用户可以在WebVTT标记中书写字幕与字幕应用的时间范围。5.3 使用使用track元素添加字幕元素添加字幕（3）使用使用Video Caption Maker生成生成WebVTT文件文件为媒体添加字幕的关键是构建WebVTT轨道文件。WebVTT文件可以手动创建，也可以使用创作工具构建。如果手工创建文件，写代码非常麻烦，并且字幕与媒体的同步需要反复测试修改。HTML5视频字幕制作工具是一个简单有效的工具，该工具可以用于创建 WebVTT文件。5.3使用使用track元素添加字幕元素添加字幕 （3）使用使用HTML5 Video Caption Maker生成生成WebVTT文件文件（1）在网页中插入视频，并对视频做如下设置。320像素宽，240像素高；显示视频播放器控件；循环播放；首选播放OGG格式文件，其次分别为MP4格式和WEBM格式（此处需准备3种不同格式的文件）；若不支持video元素，则显示提示文字“请选用其他高版本浏览器尝试播放此视频”。（2）使用HTML5视频字幕制作工具创建WebVTT文件，并通过track元素为一个视频文件添加字幕。作业与操作