Web 前端开发课程理论教学部分第九讲 : 音频与视频学时计划 :2 学时理论,1 学时实验 ( 实验四 : 在网页中使用表单和多媒体 ) 教学大纲 : 1 从网络上的视频说起 2 video 和 audio 元素 3 video 和 audio 的属性 4 video 和 audio 的方法

Size: px

Start display at page:

Download "Web 前端开发课程理论教学部分第九讲 : 音频与视频学时计划 :2 学时理论,1 学时实验 ( 实验四 : 在网页中使用表单和多媒体 ) 教学大纲 : 1 从网络上的视频说起 2 video 和 audio 元素 3 video 和 audio 的属性 4 video 和 audio 的方法"

洪苏
5 years ago
Views:

1 Web 前端开发课程理论教学部分第九讲 : 音频与视频学时计划 :2 学时理论,1 学时实验 ( 实验四 : 在网页中使用表单和多媒体 ) 教学大纲 : 1 从网络上的视频说起 2 video 和 audio 元素 3 video 和 audio 的属性 4 video 和 audio 的方法 5 video 和 audio 的事件 6 案例: 拍个 DV 让大家看 7 讨论与思考互联网的飞速发展和网络速度的改善, 使得视频和音频已经成为了互联网内容的重要形式之一, 并且视频和音频的网络传输, 也极大地推动了互联网应用的发展今天通过优酷土豆乐视 CNTV 等网站观看电影电视剧和综艺节目, 成为人们使用互联网的主要应用之一视频和音频的广泛应用, 使得在网络中使用视频和音频技术变得越加重要本讲将讨论视频和音频的容器文件和编解码器, 以及 HTML 5 对视频和音频方面的新技术, 以帮助读者创建丰富多彩的多媒体互联网应用服务一从网络上的视频说起在 HTML 5 规范之前, 如果希望在网页上播放视频音频, 通畅都需要借助第三方插件, 比如 Flash 或者需要自主开发使用多媒体播放插件但是无论哪种方式, 都需要在浏览器或者计算机中安装插件或者播放器对于视频和音频的支持, 并不是由浏览器自身来提供支持的, 这种做法复杂且麻烦, 还容易产生兼容性和安全性的问题 HTML 5 定义了一个在网页中嵌入视频和音频的标准方式, 就是 1 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

2 使用 <video> 和 <audio> 元素虽然目前此部分的工作还不够完善, 但是已经取得了浏览器的广泛支持和认可 1.1 视频容器不论是视频文件还是音频文件, 例如.avi.flv 等, 实质上都是一个容器文件这个容器文件就如同.zip 文件一样视频文件 ( 视频容器 ) 包含了音频轨道视频轨道和其他一些元数据当进行视频播放时, 音频轨道和视频轨道是绑定在一起的元数据部分包含了视频的封面图片标题子标题字幕等信息视频容器有很多中, 较为常见的如下所示 : (1)MPEG-4(.mp4) (2)Flash Video(.flv) (3)Ogg(.ogv) (4)WebM(.webm) (5)Audio Video Interleave(.avi) (6)Matroska(.mkv) 1.2 音频和视频的编解码器音频和视频的编码 / 解码器是一组算法, 用来对一段特定音频或视频进行解码和编码, 以便音频和视频能够播放当观看一个视频的时候, 视频播放器 ( 解码器 ) 需要完成的工作有 : 第一步 : 解析容器格式以找出可以使用的视频和音频轨道, 并分析它们的存储结构, 以便接下来的解码工作第二步 : 对视频流解码, 并在屏幕上显示一幅幅的图像第三步 : 对音频流解码, 同时给扬声器传输声音信号编解码器包括有损和无损两种无损视频文件一般太大了, 在网页中没有优势, 所以在网络上传送的视频采用的都是有损编解码器有损视频编解码器中, 信息在编码过程的丢失时无法避免的这就好比从一个磁带复制音频, 每次复制都会丢失一些原来音频的信息, 复制音频的质量也会越来越差因此如果希望编码后的视频能够清晰, 2 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

3 且希望得到最好的编码效率, 需要有一个良好的视频源优秀的编码算法高性能的编码软件和恰当的编码参数音频和视频的编码算法很多, 常见的有 : 音频编解码器有 :AAC MPEG-3 Ogg Vorbis 视频编解码器有 :H.264 VP8 Ogg Theora 有些编码器是受专利保护的, 有些则是免费的例如 Vorbis Theora 是免费的, 可以随意使用, 而 H.264 MPEG-4 就需要支付专利费用延伸阅读 :WebM WebM 由 Google 于 2010 年 5 月发布, 是一个开放免费的媒体文件格式现在主流的 Web 媒体都比较模糊, 作为新的音频和视频格式,WebM 旨在改善这种现状, 让 Web 视频清晰化 WebM 的后缀名是.webm WebM 格式其实是以 Matroska( 即 MKV) 容器格式为基础开发的新容器格式, 里面包括了 VP8 编码器和 Ogg Vorbis 音频编码器, 其中 Google 将其拥有的 VP8 视频编码技术以类似 BSD 授权开源,Ogg Vorbis 本来就是开放格式 Google 以不受限制许可的方式发布了 WebM 的规范和软件, 包括源码和专利权 WebM 标准的编解码器更加偏向于开源并且是基于 HTML5 标准的,WebM 项目旨在为对每个人都开放的网络开发高质量开放的视频格式, 其重点是解决视频服务这一核心的网络用户体验 1.3HTML 5 Audio 和 Video 的限制虽然 HTML 5 增加了音频和视频的元素, 但是有些功能目前仍然没有得到 HTML 5 的支持 (1) 流式音频和视频目前 HTML 5 中没有视频比特率切换的标准, 所以 HTML 5 对视频的支持只限于加载的全部媒体文件 (2)HTML 5 的媒体受到 HTTP 跨源资源共享的限制 (3)HTML 5 自身无法在视频全屏播放时进行脚本控制这个功能的缺失是出于安全的考虑, 但是可以通过浏览器自身的功能进行解决 1.4 浏览器对 HTML 5 的 Audio 和 Video 元素的支持由于音频和视频的解码是有浏览器来进行的, 因为除了了解浏览器对 Audio 和 Video 元素的支持外, 还需要知道浏览器支持的编解码 3 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

4 器具体的支持情况可以通过网站查询 : 图 9-1 Chrome 26 Firefox 20 IE10 对 HTML 5 音频视频的支持二 video 和 audio 元素 2.1 在 HTML 4 页面中播放音频和视频的方法在 HTML 4 中, 没有音频和视频的元素, 只能够使用 <object> 和 <embed> 元素来进行案例 : 示例 9-1: 在 HTML 4 页面中播放音频或视频 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 在 HTML 4 页面中播放音频或视频文件 </title> </head> 4 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

5 <body> <center> <h1> 播放视频 </h1> <object type="application/x-shockwave-flash" data="flvplayer_progressive.swf" width="673" height="378"> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt"> <param name="flashvars" value="&mm_componentversion=1&skinname=corona_skin_ 3&streamName=medias/QQ-AD-1&autoPlay=false&autoRe wind=false" /> <param name="swfversion" value="8,0,0,0"> </object> <h1> 播放音频 </h1> <embed src="medias/gege-changshilei.mp3" width="500" height="82"> </embed> <br><br> </center> </body> </html> 通过这个案例, 可以看到在 HTML 4 页面中播放音频和视频的不足是非常明显的 (1) 冗长的代码, 且非常不简洁 (2) 需要使用第三方插件, 如果用户的计算机没有安装相应的插件, 则视频就无法播放 (3) 需要结合使用 <object> 和 <embed> 元素, 并且需要添加大量的属性和参数, 代码的书写难度非常高 2.2 在 HTML 5 页面中播放音频和视频的方法在 HTML 5 中, 新增加了 video 和 audio 两个元素 video 元素专门用来播放网络上的视频,audio 元素用来播放网络上的音频使用这两个元素后, 就不需要其他插件了, 只要浏览器能够支持 HTML 5 5 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

6 的这两个元素并且能够支持音频视频文件的编解码器即可同时, 代码的书写方法也非常简单清晰简洁案例 : 示例 9-2: 在 HTML 5 页面中播放音频或视频 <!doctype html> <html> <head> <meta charset="utf-8"> <title> 在 HTML 4 页面中播放音频或视频文件 </title> </head> <body> <center> <h1> 播放视频 </h1> <video src="medias/woweizijidaiyan-ad.mp4" controls> 您的浏览器不支持 video 元素 </video> <h1> 播放音频 </h1> <audio src="medias/gege-changshilei.mp3" controls> 您的浏览器不支持 audio 元素 </audio> </center> </body> </html> 由于目前浏览器能够支持的编解码器不一致, 为了确保一个视频能够同时被所有支持 HTML 5 的浏览器支持, 则可以通过 <source> 元素来为同一个视频指定多个源, 供不同的浏览器来选择适合自己的案例 : 示例 9-3: 使用多个源, 在 HTML 5 页面中播放音频或视频 <!doctype html> <html> <head> <meta charset="utf-8"> <title> 使用多个源, 在 HTML 5 页面中播放音频或视频文件 </title> </head> <body> <center> <h1> 播放视频 </h1> 6 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

7 <video> <source src="medias/woweizijidaiyan-ad.mp4" type="video/mp4"> <source src="medias/woweizijidaiyan-ad.webm" type="video/webm"> <source src="medias/woweizijidaiyan-ad.ogv" type="video/ogv"> 您的浏览器不支持 video 元素 </video> <h1> 播放音频 </h1> <audio controls> <source src="medias/gege-changshilei.mp3" type="audio/mp3"> <source src="medias/gege-changshilei.ogg" type="audio/ogg"> 您的浏览器不支持 audio 元素 </audio> </center> </body> </html> 三 video 和 audio 的属性 video 元素和 audio 元素的属性大致相同 3.1src src 属性用来指定媒体数据的 URL 地址 3.2preload 该属性中指定视频或者音频是否进行预加载如果使用预加载, 浏览器将会预先将视频或者音频进行缓冲, 这样可以加快播放的速度因为在进行数据播放时, 可能数据已经缓冲一部分或者缓冲完成 preload 属性值有三种 : (1)none: 表示不进行预先加载 (2)metadata: 表示只预先加载媒体的元数据, 主要包括媒体字节数第一帧播放列表持续时间等信息 (3)auto: 表示预加载全部视频或音频该值是默认值 7 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

8 3.3poster 该属性为 vedio 元素的独有属性, 用来在视频不可用时, 向用户展示一张替代图片, 从而避免视频不可用时, 页面出现一片空白 3.4loop 该属性中指定是否循环播放视频或音频 3.5controls 该属性中指定是否为视频或音频添加浏览器自带的播放用的控制条控制条中具有播放暂停等按钮不同的浏览器, 自带的控制条的样式不同可以通过撰写脚本的方式自定义控制条, 而不使用浏览器默认的控制条 3.6width 和 height 该属性为 vedio 元素的独有属性用来指定视频的宽度和高度 3.7error 在读取使用媒体数据的过程中, 在正常情况下,video 和 audio 元素的 error 属性为 null 当出现错误时,error 属性将返回一个 MediaError 对象, 该对象通过 code 的方式将错误状态提供出来错误状态值为只读属性, 且有 4 个可能值 : (1)1:MEDIA_ERR_ABORTED, 数据在下载中因为用户操作的原因而被中止 8 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

9 (2)2:MEDIA_ERR_NETWORK, 确认媒体资源可用, 但是在下载时出现网络错误, 媒体数据的下载过程被中止 (3)3:MEDIA_ERR_DECODE, 确认媒体资源可用, 但是解码时发生错误 (4)4:MEDIA_ERR_SRC_NOT_SUPPORTER, 媒体格式不被支持案例 : 示例 9-4: 读取错误状态 <!doctype html> <html> <head> <meta charset="utf-8"> <title> 读取错误状态 </title> </head> <body> <video id="showvideo" src="medias/woweizijidaiyan-ad.mp4" controls></video> <script> var videoerror = document.getelementbyid("showvideo"); videoerror.addeventlistener("error",function() var errorinfo = videoerror.error; switch(errorinfo.code) case 1: alert(" 用户取消了视频的载入 "); break; case 2: alert(" 网络故障, 造成数据载入失败 "); break; case 3: alert(" 解码错误, 请重新访问 "); break; case 4: alert(" 浏览器不支持获得的视频格式 "); break;,false); </script> </body> </html> 9 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

10 3.8networkState 媒体数据在加载过程中可以使用 video 元素或 audio 元素的 networkstate 属性读取当前网络状态, 其可能值有 4 个, 该属性值为只读属性 (1)0:NETWORK_EMPTY: 初始状态 (2)1:NETWORK_IDLE: 浏览器已经选择好用什么编码格式来播放媒体, 但尚未建立网络连接 (3)2:NETWORK_LOADING: 媒体数据加载中 (4)3:NETWORK_NO_SOURCE: 没有支持的编码格式, 不进行加载 3.9currentSrc currentsrc 属性用来读取 video 元素和 audio 元素中正在播放中的媒体数据的 URL 地址 3.10buffered buffered 属性用来返回一个对象, 该对象实现 TimeRange 接口, 以确认浏览器是否已缓存媒体数据 buffered 属性值为只读属性 3.11readyState 该属性返回 video 或 audio 元素中媒体当前播放位置的就绪状态, readystate 属性值为只读属性, 其有 5 个可能值 (1)0:HAVE_NOTHING: 没有获得任何媒体的信息, 当前播放位置没有播放数据 (2)1:HAVE_METADATA: 已经获得到足够的媒体信息, 但是当 10 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

11 前播放位置没有有效的媒体数据, 暂时不能够播放 (3)2:HAVE_CURRENT_DATA: 当前播放位置已经有数据可以播放, 但没有获取到可以让播放器前进的数据如果是视频, 就是说当前帧数据已经获得, 下一帧数据没有获得 (4)3:HAVE_FUTURE_DATA: 当前播放位置已经有数据可以播放, 而且也获取到了可以让播放器前进的数据当媒体为视频时, 意思是当前帧的数据已经获得, 且下一帧的数据也已经获得 (5)4:HAVE_ENOUGH_DATA: 当前播放位置已经有数据可以播放, 下一帧数据已经获得, 且浏览器确认媒体数据以某一种速度进行加载, 可以保证有足够的后续数据进行播放 3.12seeking 和 seekable seeking 属性返回一个布尔值, 表示浏览器是否正在请求某一特定播放位置的数据,true 表示浏览器正在请求数据,false 表示浏览器已经停止请求 seekable 属性返回一个 TimeRange 对象, 该对象表示请求到的数据的时间范围 seeking 和 seekable 属性值均为只读属性 3.13currentTime starttime 和 duration currenttime 属性来读取媒体的当前播放位置, 通过修改该属性值可以修改当前播放位置如果修改的位置上没有可用的媒体数据, 将产生 INVALID_STATE_ERR 异常, 如果修改的位置上的数据浏览器上没有获得, 将产生 INDEX_SIZE_ERR 异常 starttime 属性来读取媒体播放的开始时间, 通常为 0 duration 属性来读取媒体文件总的播放时间 currenttime starttime duration 属性的值为时间, 单位为秒 currenttime 的属性值为读写属性,startTime duration 属性值为只读属性 11 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

12 3.14played paused ended played 属性可以返回一个 TimeRange 对象, 该对象中可以读取媒体文件已经播放部分的时间段该时间段的开始时间为已播放部分的开始时间, 结束时间为已播放部分的结束时间 paused 属性可以返回一个布尔值, 表示是否处于暂停播放状态 true 表示目前已经暂停播放,false 表示媒体正在播放 ended 属性可以返回一个布尔值, 表示是否已经播放完毕 true 表示媒体播放完毕,false 表示媒体没有播放完毕 played pause ended 属性值均为只读属性 3.15defaultPlaybackRate playbackrate defaultplaybackrate 属性读取或修改媒体默认的播放速率 playbackrate 属性读取或修改媒体当前的播放速率 3.16volume muted volume 属性读取或修改媒体播放的音量, 范围为 0 到 1,0 为静音,1 为最大音量 muted 属性读取或修改媒体的静音状态, 该属性值为布尔值,true 表示处于静音状态,false 表示处于非静音状态四 video 和 audio 的方法 video 元素和 audio 元素具有四种方法 4.1play 使用 play 方法来播放媒体, 自动将元素的 paused 值变为 false 12 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

13 4.2pause 使用 pause 方法来暂停播放, 自动将元素的 paused 值变为 true 4.3load 使用 load 方法来重新载入媒体进行播放, 自动将元素的 playbackrate 属性值 defaultplaybackrate 属性的值, 自动将元素的 error 的值变为 null 4.4canPlayType 使用 canplaytype 方法来测试浏览器是否支持指定的媒体类型, 该方法的定义是 : var supporttypeinfo = videoelement.canplaytype(type) 其中参数 type 的指定方法是使用播放文件的 MIME 类型来指定, 可以在指定的字符串中加上表示媒体编码格式的 codes 参数该方法返回 3 个可能值 : (1) 空字符串 : 表示浏览器不支持此种媒体类型 (2)maybe: 表示浏览器可能支持此种媒体类型 (3)probably: 表示浏览器确定支持此种媒体类型案例 : 示例 9-5: 媒体播放器 <!doctype html> <html> <head> <meta charset="utf-8"/> <title> 视频播放器 </title> <style type= text/css > body margin:30px auto; padding:0px; 13 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

14 text-align:center; font-size:10px; font-family: 微软雅黑 ; background:#f2f2f2; progress width:552px; border:1px solid #333; background:#fff; button margin-top:10px; border:none; background-color:#41a81e; color:#f2f2f2; width:68px; height:22px; text-align:center; vertical-align:middle; border-radius:8px; border:1px # solid; #showtime margin-top:10px; color:#333; #progressvalue width:0%; height:20px; background:#fff; cursor:default; </style> </head> <body> <h2> 构建自己的视频播放器 </h2>  <div id="playvideo"> <video id="videoplayer" width="552" height="311"> <source src="medias/wo-shangwenjie.mp4"> <source src="medias/wo-shangwenjie.ogv"> <source src="medias/wo-shangwenjie.webm"> 您的浏览器不支持 video 元素 </video> </div> <div id="buttondiv"> 14 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

15  <progress id="playpercent" max=100> <div id="progress"> <div id="progressvalue"></div> </div> </progress>  <div id="playbutton"> <button id="btnplay" onclick="playorpause()" disabled/> 播放 </button> <button id="btnspeedup" onclick="speedup()" disabled/> 加速播放 </button> <button id="btnspeeddown" onclick="speeddown()" disabled/> 减速播放 </button> <button id="btnslowplay" onclick="slowplay()" disabled/> 慢动作 </button> <button id="btnmute" onclick="setmute()" disabled/> 静音 </button> <button id="btnvolumeup" onclick="volumeup()" disabled/> 增大音量 </button> <button id="btnvolumedown" onclick="volumedown()" disabled/> 降低音量 </button> </div> </div> <div id="showtime"></div> </body> <script type="text/javascript"> var speed=1; var volume=1; var muted=false; var video = document.getelementbyid("videoplayer"); var showtime = document.getelementbyid("showtime"); if(video.canplaytype) video.addeventlistener('loadedmetadata',loadedmetadata,false); video.addeventlistener('ended',videoended,false); video.addeventlistener('play',videoplay,false); video.addeventlistener('pause',videopause,false); video.addeventlistener('timeupdate',updateprogress,false); video.addeventlistener("error",catcherror,false); progress=document.getelementbyid("progress"); progress.onmouseover=progress_mouseover; progress.onmouseout=progress_mouseout; progress.onclick=progress_click; playpercent=document.getelementbyid("playpercent"); playpercent.onmouseover=progress_mouseover; 15 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

16 playpercent.onmouseout=progress_mouseout; playpercent.onclick=playpercent_click; function catcherror() var error = video.error; switch(error.code) case 1: alert(" 视频的载入过程以为用户操作, 已经被中止 "); break; case 2: alert(" 网络发生故障, 视频的载入过程被中止 "); break; case 3: alert(" 浏览器对视频的解码错误, 无法播放视频 "); break; case 4: alert(" 视频不可访问或视频编码器浏览器不支持 "); break; function loadedmetadata() var btnplay=document.getelementbyid("btnplay"); btnplay.innerhtml=" 暂停 "; btnplay.disabled=""; video.play(); var buttondiv=document.getelementbyid("buttondiv"); buttondiv.style.display="white"; function PlayOrPause() if(video.paused) video.play(); video.playbackrate=speed; video.muted=muted; video.volume=volume; else video.pause(); function videoended(ev) 16 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

17 video.currenttime=0; this.pause(); function videoplay(ev) var btnplay=document.getelementbyid("btnplay"); btnplay.innerhtml=" 暂停 "; document.getelementbyid("btnspeedup").disabled=""; document.getelementbyid("btnspeeddown").disabled=""; document.getelementbyid("btnslowplay").disabled=""; document.getelementbyid("btnmute").disabled=""; document.getelementbyid("btnvolumeup").disabled=""; document.getelementbyid("btnvolumedown").disabled=""; function videopause(ev) var btnplay=document.getelementbyid("btnplay"); btnplay.innerhtml=" 播放 "; document.getelementbyid("btnspeedup").disabled="disabled"; document.getelementbyid("btnspeeddown").disabled="disabled"; document.getelementbyid("btnslowplay").disabled="disabled"; document.getelementbyid("btnmute").disabled="disabled"; document.getelementbyid("btnvolumeup").disabled="disabled"; document.getelementbyid("btnvolumedown").disabled="disabled"; function updateprogress() var value=math.round((math.floor(video.currenttime)/math.floor(video.duration) )*100,0); var progress = document.getelementbyid('playpercent'); progress.value = value; var progressvalue=document.getelementbyid("progressvalue"); progressvalue.style.width = value+"%"; showtime.innerhtml=calctime(math.floor(video.currenttime))+'/'+calctim e(math.floor(video.duration)); function calctime(time) var hour; var minute; var second; hour=string(parseint(time/3600,10)); if (hour.length == 1) hour = '0' + hour; 17 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

18 minute=string(parseint((time%3600)/60,10)); if (minute.length == 1) minute = '0' + minute; second=string(parseint(time%60,10)); if (second.length == 1) second = '0' + second; return hour+":"+minute+":"+second; function progress_mouseover(ev) showtime.innerhtml=calctime(math.floor(video.currenttime))+'/'+calctim e(math.floor(video.duration)); ev.stoppropagation(); function progress_mouseout(ev) showtime.innerhtml=""; function playpercent_click(evt) if(evt.offsetx) playpercent=document.getelementbyid("playpercent"); video.currenttime = video.duration * (evt.offsetx / playpercent.clientwidth); function progress_click(evt) progress=document.getelementbyid("progress"); if(evt.offsetx) video.currenttime = video.duration * (evt.offsetx /progress.clientwidth); else video.currenttime = video.duration * (evt.clientx /progress.clientwidth); function SpeedUp() video.playbackrate+=1; speed=video.playbackrate; function SpeedDown() video.playbackrate-=1; if(video.playbackrate<0) video.playbackrate=0; 18 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

19 speed=video.playbackrate; function SlowPlay() var btnslowplay=document.getelementbyid("btnslowplay"); if(btnslowplay.innerhtml==" 慢动作 ") video.playbackrate=0.5; btnslowplay.innerhtml=" 正常速度 "; document.getelementbyid("btnspeedup").disabled="disabled"; document.getelementbyid("btnspeeddown").disabled="disabled"; else video.playbackrate=1; btnslowplay.innerhtml=" 慢动作 "; document.getelementbyid("btnspeedup").disabled=""; document.getelementbyid("btnspeeddown").disabled=""; speed=video.playbackrate; function setmute() if(!video.muted) video.muted=true; document.getelementbyid("btnmute").innerhtml=" 取消静音 "; else video.muted=false; document.getelementbyid("btnmute").innerhtml=" 暂时静音 "; muted=video.muted; function VolumeUp() if(video.volume<1) video.volume+=0.1; volume=video.volume; function VolumeDown() if(video.volume>0) video.volume-=0.1; volume=video.volume; 19 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

20 </script> </html> 5.1 事件处理方式五 video 和 audio 的事件使用 video 元素或 audio 元素读取或者播放媒体数据时, 会触发一系列的事件, 如果使用 JavaScript 脚本来捕捉这些事件, 就可以对事件进行处理对事件的捕捉, 有两种方式 : 方式一 : 监听使用 video 元素或 audio 元素的 addeventlistener 方法来对事件的发生进行监听, 该方法的定义如下 : videoelement.addeventlistener(type,listener,usercapture); 方式二 : 使用 JavaScript 脚本中的获取事件句柄例如 : <video id= videodemo src= medias/video.webm onplay= begin_playing(); ></video> <script> function begin_playing() </script> 5.2 事件 video 和 audio 在浏览器开始请求媒体数据下载媒体数据播放媒体数据到播放结束, 触发的事件如下表所示表 7-1 input 的属性事件 abort canplay canplaythrough durationchange 描述当音频 / 视频的加载已放弃时当浏览器可以播放音频 / 视频时当浏览器可在不因缓冲而停顿的情况下进行播放时当音频 / 视频的时长已更改时 20 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

21 emptied ended error loadeddata loadedmetadata loadstart pause play playing progress ratechange seeked seeking stalled suspend timeupdate volumechange 当目前的播放列表为空时当目前的播放列表已结束时当在音频 / 视频加载期间发生错误时当浏览器已加载音频 / 视频的当前帧时当浏览器已加载音频 / 视频的元数据时当浏览器开始查找音频 / 视频时当音频 / 视频已暂停时当音频 / 视频已开始或不再暂停时当音频 / 视频在已因缓冲而暂停或停止后已就绪时当浏览器正在下载音频 / 视频时当音频 / 视频的播放速度已更改时当用户已移动 / 跳跃到音频 / 视频中的新位置时当用户开始移动 / 跳跃到音频 / 视频中的新位置时当浏览器尝试获取媒体数据, 但数据不可用时当浏览器刻意不获取媒体数据时当目前的播放位置已更改时当音量已更改时演示 : 六案例 : 拍个 DV 让大家看第一步 : 使用手机拍摄视频第二步 : 获得视频文件第三步 : 对视频文件进行编码, 以支持 HTML 5 第四步 : 制作网页, 并发布七讨论与思考 7.1 如何进行视频编辑? (1) 使用手机 DV 等拍摄的视频, 如何进行编辑? 例如添加背景音乐字幕等 (2) 视频编辑的常用软件有哪些? 21 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

22 7.2 视频分辨率 (1) 经常听到的标清高清超清有哪些区别? 分别采用了那些编码器? (2) 视频的分辨率和清晰度有关系么? 22 网页设计与网站规划讲稿 / 河南中医学院互联网应用技术研究所 /

17 Chapter Video/Audio API 17-1 <video> <audio> 17-2 <video> <audio>

17 Chapter Video/Audio API 17-1 <video> <audio> 17-2 <video> <audio> 17 Chapter 17-1 17-2 網頁程式設計 17-1 API HTMLMediaElement width heightposter ( HTML 5 http://www.w3.org/tr/html5/) error

Web 前端开发 课程理论教学部分 第九讲 : 音频与视频 学时计划 :2 学时理论,1 学时实验 ( 实验四 : 在网页中使用表单和多媒体 ) 教学大纲 : 1 从网络上的视频说起 2 video 和 audio 元素 3 video 和 audio 的属性 4 video 和 audio 的方法

Web 前端开发课程理论教学部分第九讲 : 音频与视频学时计划 :2 学时理论,1 学时实验 ( 实验四 : 在网页中使用表单和多媒体 ) 教学大纲 : 1 从网络上的视频说起 2 video 和 audio 元素 3 video 和 audio 的属性 4 video 和 audio 的方法