三天学会HTML5 ——多媒体元素的使用
2016-02-24 09:06
567 查看
目录1.HTML5Media-Video2.HTML5Media-Audio3.拖拽操作4.获取位置信息5.使用Google地图获取位置信息多媒体是互联网中的最重要的一部分，无论访问的是哪种类型的网页，视频或音频触手可及，在之前实现这些功能对开发人员来说可能非常痛苦，必须依赖Object标签，调用第三方软件来加载，如Flash等，如果有些设备不支持Flash，我们对此就束手无策了。但是HTML5的出现让多媒体网页开发变得异常简单，也形成了新的标准。
4.实现drag事件
JS代码：
7.地理位置信息的获取HTML5可以共享位置信息，精度和维度都可以通过JS事件来捕捉并返回给服务器来在google地图中定位。初始化：1.创建html页面Geolocation.html;2.添加页面元素：
如何实现自定更新位置信息呢？1.初始化
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">2.添加播放，暂停，和声音调节按钮。
<sourcesrc="vid.mp4"/>
</video>
<inputtype="button"name="name"value="Play"id="BtnPlay"/>3.创建JS函数来控制Video播放。
<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"/>
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>3.输出：
<sourcesrc="aud.mp3"type="audio/mp3"/>
</audio>
4.使用脚本添加音频元素
1.新建HTML页面<audioid="audctrl">2.添加播放，暂停及音量键
<sourcesrc="aud.mp3"type="audio/mp3"/>
</audio>
<innputtype="button"name="name"value="Play"id="BtnPlay"/>3.创建JS函数来控制音频播放。代码如下：
<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"/>
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_UN***AILABLE:
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;持续更新位置信息JS代码：
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?
}
}
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_UN***AILABLE:
x.innerHTML="Nopositioninformationavailable";
break;
casee.TIMEOUT:
x.innerHTML="Timeoutoccured";
break;
casee.UNKNOWN_ERROR:
x.innerHTML="Unknownerror";
break;
}
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CDH5上安装Hive,HBase,Impala,Spark等服务
- 使用html5画出一个简单的坦克
- HTML5新特性之WebRTC
- 一个最简html5文档来说明html5的新特性和写法
- html5 canvas画图之图形随拖动而复制（有操作指示）
- H5的能力
- 关于 断点续传上传与秒传 你绕不过去的坎 html5+php
- Html5中Select如何设定长度
- HTML5移动开发技术要点总结及各事件含义
- html5页面重置样式(html5.css)
- 基于安卓开发后嵌入一个html5开发的项目碰到的问题
- H5项目常见问题及注意事项
- Html5标签
- 【分享】HTML5的Canvas制作3D动画效果分享
- Html5中Select如何设定长度
- [HTML5权威指南] => 读书笔记(一)
- 三天学会HTML5 ——多媒体元素的使用
- 浅谈：html5和html的区别
- web学习之路—H5（五）
- form表单(h5)