Web前端开发项目教程 课件 7.2.1 在HTML5中嵌入音频、视频

Web前端开发主讲人：李娜在HTML5中嵌入音频、视频【任务目标】知识目标能力目标素质目标了解HTML5支持的音频和视频格式；掌握HTML5中视频相关属性的运用。能够完成视频、音频的一些常见操作。培养学生的创新意识以及灵活运用所学知识的能力。【导学知识】一、音频/视频嵌入技术概述

<video>、<audio>

【导学知识】二、在HTML5中嵌入音频

1.<audio>标签概述

<audiosrc="音频文件路径"controls="controls"></audio>支持3种音频格式，分别为ogg、mp3、wav。【案例】<div>

<audiosrc="music/一起向未来.mp3"controls="controls">该浏览器不支持audio标签</audio></div> div{ width:800px; height:200px; margin:0auto;} 【导学知识】audio标签的常见属性

属性值描述srcURL播放音频的文件地址controlscontrols显示控件autoplayautoplay自动播放looploop循环播放preloadpreload预加载，音频在页面加载时加载，并预备播放。使用"autoplay"，忽略该属性。mutedmuted视频的音频输出为静音【导学知识】二、在HTML5中嵌入音频2.<audio>标签浏览器的兼容性

音频格式Chrome3.0及更高版本Firefox3.5及更高版本IE9.0及更高版本Opera10.5及更高版本Safari3.0及更高版本Ogg支持支持

支持

MP3支持

支持

支持WAV

支持

支持支持【案例】<audiocontrols="controls"><sourcesrc="music.ogg"type="music/ogg"><sourcesrc="music1.mp3"type="music/mp3">您的浏览器不支持audio元素。</audio> 【导学知识】三、在HTML5中嵌入视频

1.<video>标签概述

<videosrc="视频文件路径"controls="controls"></video>视频格式主要包括ogg、mpeg4、webm等。【导学知识】<video>标签的常见属性

属性值描述srcURL播放视频的文件地址controlscontrols显示控件autoplayautoplay自动播放looploop循环播放preloadpreload预加载，视频在页面加载时加载，并预备播放。使用"autoplay"，忽略该属性。mutedmuted视频的音频输出为静音posterURL贴画、海报，表示单击播放前的图片【案例】<div>

<videosrc="video/video1.mp4"controls="controls"muted="muted">

该浏览器不支持video标签

</video></div>

div{ width:568px; height:400px; margin:10pxauto; }

【导学知识】三、在HTML5中嵌入视频2.<video>标签浏览器的兼容性

音频格式Chrome6.0及更高版本Firefox4.0及更高版本IE9.0及更高版本Opera10.6及更高版本Safari3.0及更高版本Ogg支持支持

支持

MPEG4

支持

支持WebM支持支持

支持【案例】<videocontrols="controls"><sourcesrc="video.ogg"type="video/ogg"><sourcesrc="video1.mp3"type="video/mp3">您的浏览器不支持video元素。</video>【任务小结】这节课，我们学习了HTML5中嵌入音频和视频文件的过程，在嵌入音频和视频标签时，不仅仅是单纯的属性设置，还要考虑浏览器的兼容性