第9节音频和视频标签.pptVIP

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