多媒体技术基础26(HTML5)_第1页
多媒体技术基础26(HTML5)_第2页
多媒体技术基础26(HTML5)_第3页
多媒体技术基础26(HTML5)_第4页
多媒体技术基础26(HTML5)_第5页
已阅读5页，还剩24页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5多媒体技术基础2URIT项目申报Kinect手术室影像控制Kinect三维建模及3D打印控制学生信息管理系统网站设计3D模型作品设计2什么是HTML5？HTML5将成为HTML、XHTML以及HTMLDOM的新标准。HTML的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。HTML5是如何起步的？HTML5是W3C与WHATWG合作的结果。W3C指WorldWideWebConsortium，万维网联盟。WHATWG指WebHypertextApplicationTechnologyWorkingGroup。WHATWG致力于web表单和应用程序，而W3C专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。为HTML5建立的一些规则：新特性应该基于HTML、CSS、DOM以及JavaScript。减少对外部插件的需求（比如Flash）更优秀的错误处理更多取代脚本的标记HTML5应该独立于设备开发进程应对公众透明新特性HTML5中的一些有趣的新特性：用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search浏览器支持最新版本的Safari、Chrome、Firefox以及Opera支持某些HTML5特性。InternetExplorer9支持某些HTML5特性。Web上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法。视频格式当前，video元素支持三种视频格式：Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件MPEG4=带有H.264视频编码和AAC音频编码的MPEG4文件WebM=带有VP8视频编码和Vorbis音频编码的WebM文件格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No

如何工作如需在HTML5中显示视频，您所有需要的是control属性供添加播放、暂停和音量控件。包含宽度和高度属性也可以修改。<video>与</video>之间插入的内容是供不支持video元素的浏览器显示的：<videosrc="movie.ogg"controls="controls"></video>

<videosrc="movie.ogg"width=“160"height=“120"controls="controls">Yourbrowserdoesnotsupportthevideotag.</video>

实例上面的例子使用一个Ogg文件，适用于Firefox、Opera以及Chrome浏览器。要确保适用于Safari浏览器，视频文件必须是MPEG4类型。video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：<videowidth="320"height="240"controls="controls"><sourcesrc="movie.ogg"type="video/ogg"><sourcesrc="movie.mp4"type="video/mp4">Yourbrowserdoesnotsupportthevideotag.</video>

<video>标签的属性属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。srcurl要播放的视频的URL。widthpixels设置视频播放器的宽度。使用DOM进行控制HTML5<video>元素同样拥有方法、属性和事件。其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的DOM事件能够通知您，比方说，<video>元素开始播放、已暂停，已停止，等等。方法、属性以及事件方法属性事件play()currentSrcplaypause()currentTimepauseload()videoWidthprogresscanPlayTypevideoHeighterror

durationtimeupdate

endedended

errorabort

pausedempty

mutedemptied

seekingwaiting

volumeloadedmetadata

height

width

在所有属性中，只有videoWidth和videoHeight属性是立即可用的。在视频的元数据已加载后，其他属性才可用。Web上的音频直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了一种通过audio元素来包含音频的标准方法。audio元素能够播放声音文件或者音频流。音频格式当前，audio元素支持三种音频格式：

IE9Firefox3.5Opera10.5Chrome3.0Safari3.0OggVorbis

√√√

MP3√

√√Wav

√√

√如何工作如需在HTML5中播放音频，所有需要的是：control属性供添加播放、暂停和音量控件。<audio>与</audio>之间插入的内容是供不支持audio元素的浏览器显示的：<audiosrc="song.ogg"controls="controls"></audio>

实例上面的例子使用一个Ogg文件，适用于Firefox、Opera以及Chrome浏览器。要确保适用于Safari浏览器，音频文件必须是MP3或Wav类型。audio元素允许多个source元素。source元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：<audiosrc="song.ogg"controls="controls">Yourbrowserdoesnotsupporttheaudiotag.</audio>

<audiocontrols="controls"><sourcesrc="song.ogg"type="audio/ogg"><sourcesrc="song.mp3"type="audio/mpeg">Yourbrowserdoesnotsupporttheaudiotag.</audio>

<audio>标签的属性属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。srcurl要播放的音频的URL。拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在HTML5中，拖放是标准的一部分，任何元素都能够拖放。<!DOCTYPEHTML><html><head><scripttype="text/javascript">functionallowDrop(ev){ev.preventDefault();}functiondrag(ev){ev.dataTransfer.setData("Text",ev.target.id);}functiondrop(ev){ev.preventDefault();vardata=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}</script></head><body><divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"></div><imgid="drag1"src="img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69"/></body></html>

拖放设置元素为可拖放首先，为了使元素可拖动，把draggable属性设置为true：拖动什么-ondragstart和setData()然后，规定当元素被拖动时，会发生什么。在上面的例子中，ondragstart属性调用了一个函数，drag(event)，它规定了被拖动的数据。dataTransfer.setData()方法设置被拖数据的数据类型和值：在这个例子中，数据类型是"Text"，值是可拖动元素的id("drag1")。<imgdraggable="true"/>

functiondrag(ev){ev.dataTransfer.setData("Text",ev.target.id);}

拖放放到何处-ondragoverondragover事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。这要通过调用ondragover事件的

event.preventDefault()方法：进行放置-ondrop当放置被拖数据时，会发生drop事件。在上面的例子中，ondrop属性调用了一个函数，drop(event)：event.preventDefault()

functiondrop(ev){ev.preventDefault();vardata=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));}

HTML5Canvas什么是Canvas？HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向HTML5页面添加canvas元素。规定元素的id、宽度和高度：<canvasid="myCanvas"width="200"height="100"></canvas>

HTML5Canvas通过JavaScript来绘制canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成：JavaScript使用id来寻找canvas元素：然后，创建context对象：getContext("2d")对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面的两行代码绘制一个红色的矩形：<scripttype="text/javascript">varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>

varc=document.getElementById("myCanvas");

varcxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);HTML5Canvas理解坐标上面的fillRect方法拥有参数(0,0,150,75)。意思是：在画布上绘制150x75的矩形，从左上角开始(0,0)。如下图所示，画布的X和Y坐标用于在画布上对绘画进行定位。HTML5内联SVG什么是SVG？SVG指可伸缩矢量图形(ScalableVectorGraphics)SVG用于定义用于网络的基于矢量的图形SVG使用XML格式定义图形SVG图像在放大或改变尺寸的情况下其图形质量不会有损失SVG是万维网联盟的标准SVG的优势与其他图像格式相比（比如JPEG和GIF），使用SVG的优势在于：SVG图像可通过文本编辑器来创建和修改SVG图像可被搜索、索引、脚本化或压缩SVG是可伸缩的SVG图像可在任何的分辨率下被高质量地打印SVG可在图像质量不下降的情况下被放大把SVG直接嵌入HTML页面在HTML5中，能够将SVG元素直接嵌入HTML页面中：<!DOCTYPEhtml><html><body><svgxmlns="/2000/svg"v

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论