武汉纺织大学传媒学院 cm.wtu.edu.cn 第9节 音频及视频标签 武汉纺织大学传媒学院 cm.wtu.edu.cn 2018/11/9 传媒学院
1、引言 HTML5 HTML5的设计目标 特点 是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定 为了在移动设备上支持多媒体 特点 简单易学 比如视频标签，如果使用html4要写更多代码 2018/11/9 传媒学院
支持HTML5的浏览器 IE10+支持 Firefox4.0+支持 Chrome6+支持 Win10的Edge 移动平台的浏览器大都支持，比如安卓、苹果自带的浏览器 2018/11/9 传媒学院
2、audio标签 HTML5的音频标签 语法实例 <audio src=someaudio.wav> 2018/11/9 传媒学院
audio标签属性 autoplay controls loop preload 取值preload，如果出现该属性，则网页加载时加载该音频，如果同时出现autoplay则忽略此属性 2018/11/9 传媒学院
例子 <audio src=endless.mp3></audio> 会有什么效果？ 这个呢？ <audio src=endless.mp3 autoplay=autoplay></audio> 这个呢？ <audio src=endless.mp3 controls=controls></audio> Firefox上的显示效果 2018/11/9 传媒学院
3、video标签 HTML5的视频标签 video元素支持三种视频格式 支持mp4的浏览器 Ogg Mpeg4 WebM 新版本的ie、edge、firefox、chrome 而且要win7及以上系统才支持 2018/11/9 传媒学院
语法实例 <video src="movie.ogg" width="320" height="240" controls="controls"> 您的浏览器不支持video标签 </video> src属性指出要播放的视频频文件，不可缺少 被video标签对包含的文字内容只会在不支持html5的浏览器上显示出来 属性width，height设置视频播放窗口的大小 如果不设置该属性，则按视频默认大小显示 属性controls（取值controls）显示控件 比如播放按钮 2018/11/9 传媒学院
video标签的其他属性 autoplay loop preload 取值为autoplay，如果出现该属性，则视频就绪后会马上播放 2018/11/9 传媒学院
例子 <video src=movie.ogg width=400 controls=controls></video> 设置宽，高自动变化 点击播放，开始加载视频，就绪则开始播放 如果希望是自动循环 播放的广告呢？ Firefox上的显示效果 2018/11/9 传媒学院
4、Firefox查看器 可用于查看网页代码，发现错误 打开/关闭方式 工具-Web开发者-查看器 2018/11/9 传媒学院
例子 2018/11/9 传媒学院
例子 2018/11/9 传媒学院
例子 实际代码 2018/11/9 传媒学院
作业1 制作一个音频/视频播放页面，两者都有控制界面，页面打开时音频不自动播放，视频自动循环播放，音频/视频文件放置在和网页同一目录下，效果图如下 2018/11/9 传媒学院
作业2 利用Firefox的查看器发现下列代码的错误，并改正 <html> <head></head> <body> <table width=600 align=center> <tr> <td align=center>WTU</td> <td colspan=3 align=center bgcolor=green height=80><h1>Welcome to my site</h1></td> </tr> <td> <table width=100> <tr><td bgcolor=blue>武大</td></tr> <tr><td bgcolor=gray>华科</td></tr> <tr><td bgcolor=blue>华师</td></tr> <tr><td bgcolor=gray>理工大</td></tr> <tr><td bgcolor=blue>中南财大</td></tr> <tr><td bgcolor=gray>地大</td></tr> <tr><td bgcolor=blue>纺大</td></tr> </table> </td> <td bgcolor=yellow>使用指南</th> <td bgcolor=orange>新闻中心</td> </html> 左边的导航栏放在一个被嵌套在单元格的表格中，设置了该表格宽度100，整个布局是600，为什么导航栏右边有一条是空白，把表该格宽度设为200还有，问题在哪？ 2018/11/9 传媒学院