UI设计师-前端基础-HTML5_HTML5新特性：音频、视频和WebGL.docxVIP

PAGE1

PAGE1

HTML5新特性：音频、视频和WebGL

1HTML5音频标签

HTML5引入了audio标签，用于在网页中嵌入音频内容。这是一个自包含的标签，意味着其内容可以由浏览器直接播放，而无需额外的插件（如Flash）。此标签可以用于定义一个包含音频信息的媒体资源，可以是多个音轨，控制其播放、暂停、音量等操作。

1.1示例代码

audiocontrols

sourcesrc=sample.mp3type=audio/mpeg

sourcesrc=sample.oggtype=audio/ogg

Yourbrowserdoesnotsupporttheaudioelement.

/audio

controls属性：为音频播放器提供控制界面，包括播放/暂停按钮、音量控制、进度条等。

source标签：用于指定音频文件的源，可以提供多个源。浏览器会使用第一个可以被识别的源。

1.2数据样例

假设你有一个名为sample.mp3和sample.ogg的音频文件，你可以使用audio标签在你的网页中嵌入这些音频文件，为用户提供音频播放控制。

2HTML5视频标签

HTML5的video标签与audio标签类似，用于在网页中嵌入视频内容。它同样是一个自包含的标签，无需外部插件即可在支持的浏览器中播放视频。

2.1示例代码

videowidth=320height=240controls

sourcesrc=sample.mp4type=video/mp4

sourcesrc=sample.oggtype=video/ogg

Yourbrowserdoesnotsupportthevideotag.

/video

width和height属性：设定视频的宽度和高度。

source标签：同样用于指定视频文件的源，可以提供多个源。

2.2数据样例

如果你有名为sample.mp4和sample.ogg的视频文件，你可以使用video标签在你的网页中嵌入这些视频文件，为用户提供视频播放控制。

3WebGL：3D图形渲染

WebGL是一种用于在网页上渲染3D和2D图形的API，无需任何插件。WebGL实质上是OpenGLES2.0的一个超集，通过JavaScript来访问。

3.1示例代码

此示例展示了如何使用WebGL和Three.js（一个基于WebGL的3DJavaScript库）创建一个简单的旋转立方体。

!DOCTYPEhtml

html

head

titleWebGL立方体示例/title

scriptsrc=/build/three.js/script

/head

body

script

varscene,camera,renderer;

vargeometry,material,cube;

init();

animate();

functioninit(){

scene=newTHREE.Scene();

camera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);

camera.position.z=5;

renderer=newTHREE.WebGLRenderer();

renderer.setSize(window.innerWidth,window.innerHeight);

document.body.appendChild(renderer.domElement);

geometry=newTHREE.BoxGeometry(1,1,1);

material=newTHREE.MeshBasicMaterial({color:0x00ff00});

cube=newTHREE.Mesh(geometry,material);

scene.add(cube);

}

functionanimate(){

requestAnimationFrame(animate);

cube.rotation.x+=0.01;

cube.rotation.y+=