移动物联网开发之音频和视频应用剖析.pptxVIP

目录 处理视频 处理音频 实例6-4：检测浏览器是否支持这个媒体类型 实例6-1：播放一首音乐 实例6-2：显示加载视频的状态 实例6-3：出错时在播放屏幕中显示出错信息 实例6-5：显示视频的播放状态 综合实例：为视频设置素材图片并显示播放时间 1 处理视频 6.1.1 使用video标记 在HTML5标记语言中，通过新增标记video可以在网页中播放视频，并控制视频播放。当前，video标记支持以下三种视频格式： Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件。 MPEG4：带有H.264视频编码和AAC音频编码的MPEG 4文件。 WebM：带有VP8视频编码和Vorbis音频编码的WebM文件。 1 处理视频 目前主流浏览器对上述三种格式的支持信息如下表所示。 主流浏览器版本支持video标记的情况 在HTML5标记语言中，使用video标记的格式如下所示。 video src=movie.ogg controls=controls /video 1 处理视频 control：供添加播放、暂停和音量控件。 video与/video之间插入的内容：供不支持video元素的浏览器显示信息。 例如下面的代码： video src=movie.ogg width=320 height=240 controls=controls 你的浏览器不支持这种格式 /video 1 处理视频 另外，video标记允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。例以下面的代码。 video width=320 height=240 controls=controls source src=movie.ogg type=video/ogg source src=movie.mp4 type=video/mp4 你的浏览器不支持这种格式 /video 1 处理视频 6.1.2 video标记的属性 在HTML5标记语言中，video标记中各个属性的具体说明如下表所示。 video的属性信息 2 处理音频 6.2.1 audio标记 在HTML5标记语言中，通过使用audio标记元素可以播放声音文件或者音频流。现在的audio标记支持三种音频格式，这三种格式在主流浏览器版本的支持信息如下表所示。 主流浏览器版本支持audio标记的情况 2 处理音频 假如想在HTML5中播放音频，只需通过以下代码即可实现。 audio src=song.ogg controls=controls /audio control属性：供添加播放、暂停和音量控件。 audio与/audio之间插入的内容：供不支持audio元素的浏览器显示。 例如在下面的演示代码中，使用一个名为“ogg”格式的音频文件，可以适用于Firefox、Opera以及Chrome浏览器。 audio src=song.ogg controls=controls 你的浏览器不支持！ /audio 2 处理音频 在标记audio中允许有多个source元素，通过source元素可以链接不同的音频文件。浏览器默认将使用第一个可识别的格式。例以下面的代码。 audio controls=controls source src=song.ogg type=audio/ogg source src=song.mp3 type=audio/mpeg 你的浏览器不支持！ /audio 2 处理音频 6.2.2 audio标记的属性 在HTML5标记语言中，audio标记中各个属性的具体说明如下表所示。 audio的属性信息 3 实例6-1播放一首音乐 实例文件6-1.html的实现代码如下所示。 !DOCTYPE HTML html body audio controls=controls autoplay=autoplay source src=song.mp3 type=audio/mpeg / source src=song.ogg type=audio/mpeg / 你的浏览器不支持！ /audio /body /html 3 实例6-1播放一首音乐 上述代码的功能是在网页中自动播放名为“song.mp3”的音频文件，当该文件不存在时，将播放“song.ogg”音频文件。在代码中音频文件song.ogg和实例文件6-1.html同属于一个目录下。执行后的效果如下图所示。 执行效果 4 实例6-2显示加载视频的状态 在HTML5标记语言中，通过多媒体元素video的“networkState”属性可以返回视频文件的网络状态。当浏览器读取视频文件时会触发“progress”事件，通过该事件可以获取视频