您的位置：首页 > Web前端 > HTML5

三天学会HTML5 ——多媒体元素的使用

2016-02-22 17:58 681 查看

目录

1.HTML5Media-Video

2.HTML5Media-Audio

3.拖拽操作

4.获取位置信息

5.使用Google地图获取位置信息

多媒体是互联网中的最重要的一部分，无论访问的是哪种类型的网页，视频或音频触手可及，在之前实现这些功能对开发人员来说可能非常痛苦，必须依赖Object标签，调用第三方软件来加载，如Flash等，如果有些设备不支持Flash，我们对此就束手无策了。但是HTML5的出现让多媒体网页开发变得异常简单，也形成了新的标准。

1.使用Video元素。

在本节中学习如何在HTML5中使用Video元素

1.准备视频资源

2.创建HTML页面

新建HTML，并命名为“Media.html”,输入以下内容：

<videocontrolswidth="500px"id="vid">
<sourcesrc="vid.mp4"/>
</video>

可以观察到的是video标签中包含“Controls”,添加该标签可以使得播放器工具栏可见。Controlbar和我们平常所见到的一样，非常简单，包含暂停，播放，停止等按钮。

注意：

要确保video和html文件存放到同一目录下。如果想放置在不同的目录下，需要设置src属性。

HTML5Video元素只支持MP4，webm,3gpp,m4vmpeg,ogg，quicktime,x-ms-wmvright格式。

输出：

2.使用脚本控制Video元素

1.创建HTML页面

新建HTML页面“Media01.html”设置Video资源src属性。在本节中不使用Controls属性来设置，使用JS代码来实现。

<videowidth="500px"id="vid">
<sourcesrc="vid.mp4"/>
</video>

2.添加播放，暂停，和声音调节按钮。

<inputtype="button"name="name"value="Play"id="BtnPlay"/>
<inputtype="button"name="name"value="Stop"id="btnStop"/>
<inputtype="button"name="name"value="End"id="btnEnd"/>
<inputtype="range"name="name"value="0.1"min="0"max="1"step="0.1"id="slideVolume"/>

3.创建JS函数来控制Video播放。

functionPlayOrPause()
{
varv=document.getElementById('vid');
if(v.paused||v.ended)
{
v.play();
document.getElementById('BtnPlay').value="Pause";
}
else
{
v.pause();
document.getElementById('BtnPlay').value="Play";
}
}

设置CurrentTime为6,则表示在第六秒时视频停止播放。

functionStop()
{
varv=document.getElementById('vid');
v.pause();
v.currentTime=6;
document.getElementById('BtnPlay').value="Play";
}

如下是设置当视频播放完成之后停止播放：

functionEnd()
{
varv=document.getElementById('vid');
v.pause();
v.currentTime=v.duration;
document.getElementById('BtnPlay').value="Play";
}

以下代码是将声音调节控制到0-1之间：

functionChangeVolume(element)
{
varv=document.getElementById('vid');
v.volume=element.value;//Formutesetitto0
}

输出：

3.Audio元素

HTML5使得在页面中加载音频元素变得非常简单。

1.准备音频资源

2.新建HTML页面，输入以下内容：

<audioid="audctrl"controls>
<sourcesrc="aud.mp3"type="audio/mp3"/>
</audio>

3.输出：

4.使用脚本添加音频元素

1.新建HTML页面

<audioid="audctrl">
<sourcesrc="aud.mp3"type="audio/mp3"/>
</audio>

2.添加播放，暂停及音量键

<innputtype="button"name="name"value="Play"id="BtnPlay"/>
<inputtype="button"name="name"value="Stop"id="btnStop"/>
<inputtype="button"name="name"value="End"id="btnEnd"/>
<inputtype="range"name="name"value="0.1"min="0"max="1"step="0.1"id="slideVolume"/>

3.创建JS函数来控制音频播放。代码如下：

functionPlayOrPause()
{
varv=document.getElementById('audctrl');
if(v.paused||v.ended)
{
v.play();
document.getElementById('BtnPlay').value="Pause";
}
else
{
v.pause();
document.getElementById('BtnPlay').value="Play";
}
}

同上，设置在第6秒停止播放：

functionStop()
{
varv=document.getElementById('audctrl');
v.pause();
v.currentTime=6;
document.getElementById('BtnPlay').value="Play";
}

5.拖拽操作的实现

在之前，实现拖拽操作都是开发人员自定义逻辑来实现，但是HTML5提供了拖拽API，使得拖拽操作的实现变得如此简单。

1.准备资源（图片资源）

2.设置draggable属性

<imgsrc="fish.png"style="width:179px;height:120px;top:200px;"draggable="true"id="img11"ondragstart="drag(event)"/>

3.输出

4.实现drag事件

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

5.drog操作

<divid="div1"class="bowl"ondrop="drop(event)"ondragover="allowDrop(event)">
</div>

输出：

ondragover事件制定被拖拽的数据。

functionallowDrop(ev){
ev.preventDefault();
}

当拖拽的元素被鼠标释放时，自动调用ondrop事件

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

输出：

6.复杂的拖拽操作实现

新建HTML页面，HTML&Css代码如下：

<style>
body{
cursor:pointer;
text-align:center;
}
.divdrag{
position:relative;
border:0pxsolidrgba(0,0,0,.25);
width:300px;
height:300px;
padding:10px10px10px10px;
float:left;
}
.face{
background-image:url('face.jpg');
background-repeat:no-repeat;
width:424px;
height:510px;
border:1pxdottedgrey;
padding:0000;
}
.facetrtd{
text-align:center;
border:1pxdotted#f7ecec;
}
</style>

<h2>Createtheface</h2>
<divclass="divdrag">
<imgsrc="eye1.png"alt="eye"draggable="true"id="eye1"ondragstart="drag(event)"/>
<imgsrc="eye2.png"alt="eye"draggable="true"id="eye2"ondragstart="drag(event)"/>
<imgsrc="nose2.png"alt="nose"draggable="true"id="nose2"ondragstart="drag(event)"/>
<imgsrc="eye4.png"alt="eye"draggable="true"id="eye4"ondragstart="drag(event)"/>
<imgsrc="nose1.png"alt="nose"draggable="true"id="nose1"ondragstart="drag(event)"/>
<imgsrc="eye3.png"alt="eye"draggable="true"id="eye3"ondragstart="drag(event)"/>
<imgsrc="smile1.png"alt="smile"draggable="true"id="smile1"ondragstart="drag(event)"/>
<imgsrc="smile3.png"alt="smile"draggable="true"id="smile2"ondragstart="drag(event)"/>
<imgsrc="smile2.png"alt="smile"draggable="true"id="smile3"ondragstart="drag(event)"/>
</div>
<divstyle="float:left;">
<ahref="DragnDrop.html"title="Clickheretoreset"style="text-decoration:none;">
<imgsrc="direction.png"width="125"height="100"onclick=""/>
</a>
</div>
<divid="div1"style="width:300px;height:300px;float:left;">
<tableclass="face">
<tr>
<tdcolspan="2"style="width:100%;"> </td>
</tr>
<tr>
<tdcolspan="2"style="width:100%;"> </td>
</tr>
<tr>
<tdid="eye"style="width:50%"ondrop="drop(event)"ondragover="allowDrop(event)"></td>
<tdid="eye"style="width:50%"ondrop="drop(event)"ondragover="allowDrop(event)"></td>
</tr>
<tr>
<tdid="nose"ondrop="drop(event)"ondragover="allowDrop(event)"colspan="2"></td>
</tr>
<tr>
<tdid="smile"ondrop="drop(event)"ondragover="allowDrop(event)"colspan="2"></td>
</tr>
</table>
</div>

输出：

JS代码：

functionallowDrop(ev){
ev.preventDefault();
}

functiondrag(ev){
ev.dataTransfer.effectAllowed='copy';
ev.dataTransfer.setData("text",ev.target.id);
}

functiondrop(ev){
ev.preventDefault();
vardata=ev.dataTransfer.getData("text");
if(data.indexOf(ev.target.id)==-1){
ev.dataTransfer.clearData();
}
else{
ev.target.appendChild(document.getElementById(data));
}
}

运行：

7.地理位置信息的获取

HTML5可以共享位置信息，精度和维度都可以通过JS事件来捕捉并返回给服务器来在google地图中定位。

初始化：

1.创建html页面Geolocation.html;

2.添加页面元素：

<inputtype="button"value="GetMyLocation"/>

JS代码：

<scripttype=”text/Javascript”>
varx=document.getElementById("lblDisplay");

functiongetLocation(){
document.getElementById("header").value="StaticLocation";
if(navigator.geolocation){
varopt={
timeout:6000,
maximumAge:60000,
enableHighAccuracy:true
};
navigator.geolocation.getCurrentPosition(showPosition,errorCallBack,opt);
}
else{
alert('Nosupportforgeolocation');
}
}

functionshowPosition(position){
x.innerHTML="Latitude:"+position.coords.latitude+
"Longitude:"+position.coords.longitude;
}

functionerrorCallBack(e){
switch(e)
{
casee.PERMISSION_DENIED:
x.innerHTML="Userdeniedgeolocationrequest";
break;
casee.POSITION_UNAVAILABLE:
x.innerHTML="Nopositioninformationavailable";
break;
casee.TIMEOUT:
x.innerHTML="Timeoutoccured";
break;
casee.UNKNOWN_ERROR:
x.innerHTML="Unknownerror";
break;
}
}
</script>

执行：

如何实现自定更新位置信息呢？

1.初始化

<inputtype="button"value="GetMyLocationUpdated"/>

2.JS代码

varwatchid;
functiongetUpdatedLocation(){
document.getElementById("header").value="DynamicLocation";
if(navigator.geolocation){
varopt={
timeout:500,
maximumAge:1000,
enableHighAccuracy:true
};
watchid=navigator.geolocation.watchPosition(showPosition,errorCallBack,opt);
}
else{
//nonativesupport;maybetryafallback?
}
}

持续更新位置信息

JS代码：

functionstopUpdatingLocation(){
if(navigator.geolocation){
navigator.geolocation.clearWatch(watchid);
}
}

输出：

7.使用Google地图

1.创建HTML页面

2.添加GOOGLE地图的引用

<scriptsrc="http://maps.google.se/maps/api/js?sensor=false"></script>

3.添加div元素，并加载地图

<divid="divmap"style="border:1pxsolid#ffd800;width:400px;height:400px;"></div>

4.添加点击按钮来加载地图并输入目的地

5.js代码：

<scripttype="text/javascript">

functionGetMyDirection(){
if(navigator.geolocation){
varopt={
timeout:500,
maximumAge:1000,
enableHighAccuracy:true
};
navigator.geolocation.getCurrentPosition(showPosition,errorCallBack,opt);
}
else{
alert('Nosupportforgeolocation');
}
}

functionshowPosition(position){
showInMap(position.coords.latitude,position.coords.longitude);
}

functionshowInMap(lat,lang){

vardirectionsService=newgoogle.maps.DirectionsService();
vardirectionsRenderer=newgoogle.maps.DirectionsRenderer();

varroute={
origin:newgoogle.maps.LatLng(lat,lang),
destination:document.getElementById('txtDestination').value,travelMode:google.maps.DirectionsTravelMode.DRIVING
};

varmapOptions={
zoom:10,
center:newgoogle.maps.LatLng(50.8504500,4.3487800),mapTypeId:google.maps.MapTypeId.ROADMAP
};

varmap=newgoogle.maps.Map(document.getElementById("divmap"),mapOptions);
directionsRenderer.setMap(map);
directionsRenderer.setPanel(document.getElementById("divDriveDirection"));
directionsService.route(route,function(result,status){
if(status===google.maps.DirectionsStatus.OK){
directionsRenderer.setDirections(result);
}
});
}

functionerrorCallBack(e){
switch(e){
casee.PERMISSION_DENIED:
x.innerHTML="Userdeniedgeolocationrequest";
break;
casee.POSITION_UNAVAILABLE:
x.innerHTML="Nopositioninformationavailable";
break;
casee.TIMEOUT:
x.innerHTML="Timeoutoccured";
break;
casee.UNKNOWN_ERROR:
x.innerHTML="Unknownerror";
break;
}
}
</script>

运行：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航