您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 Code iProcess 课程 角色 咨询 工具 火云堂 讲座吧   建模者  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
 
     
   
 订阅
  捐助
三天学会HTML5 ——多媒体元素的使用
 
作者:葡萄城控件技术团队 来源:cnblogs  发布于 2016-5-11
863 次浏览     评价:      
 

目录

1. HTML5 Media-Video

2. HTML5 Media-Audio

3. 拖拽操作

4. 获取位置信息

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

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

1. 使用Video 元素。

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

1.准备视频资源

2. 创建HTML 页面

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

<video controls width="500px" id="vid">  
<source src="vid.mp4" />  
</video>

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

注意:

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

HTML5 Video 元素只支持MP4,webm,3gpp,m4v mpeg,ogg ,quicktime,x-ms-wmvright格式。

输出:

2. 使用脚本控制Video 元素

1. 创建HTML 页面

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

<video width="500px" id="vid">
<source src="vid.mp4" />  
</video>

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

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

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

function PlayOrPause()  
{  
var v = 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,则表示在第六秒时视频停止播放。

function Stop() { var v = document.getElementById('vid'); v.pause(); v.currentTime = 6; document.getElementById('BtnPlay').value = "Play"; }

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

function End() { var v = document.getElementById('vid'); v.pause(); v.currentTime = v.duration; document.getElementById('BtnPlay').value = "Play"; }

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

function ChangeVolume(element) { var v = document.getElementById('vid'); v.volume = element.value;//For mute set it to 0 }

输出:

3. Audio 元素

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

1. 准备音频资源

2. 新建HTML页面,输入以下内容:

<audio id="audctrl" controls>  
<source src="aud.mp3" type="audio/mp3" />  </audio>

3. 输出:

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

1.新建HTML页面

<audio id="audctrl">          
<source src="aud.mp3" type="audio/mp3" />  </audio>

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

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

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

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

同上,设置在第6秒停止播放:

function Stop()  {    
var v = document.getElementById('audctrl');   
 v.pause();    
v.currentTime = 6;   
 document.getElementById('BtnPlay').value = "Play"; 
 }

5. 拖拽操作的实现

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

1. 准备资源(图片资源)

2. 设置draggable 属性

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

3. 输出

4. 实现drag 事件

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

5.  drog 操作

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

输出:

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

function allowDrop(ev) {  ev.preventDefault();  }

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

function drop(ev) {    
ev.preventDefault();    
var data = 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: 0px solid rgba(0, 0, 0, .25);             
 width: 300px;             
 height: 300px;             
 padding: 10px 10px10px10px;             
 float: left;          
}          
.face {             
 background-image: url('face.jpg');             
 background-repeat: no-repeat;              
width: 424px;             
 height: 510px;             
 border: 1px dotted grey;             
 padding: 0 0 0 0;          
}  .facetr td {              
text-align: center;             
 border: 1px dotted #f7ecec;         
 }  </style>

 

<h2>Create the face</h2>      
<div class="divdrag">      
<img src="eye1.png" alt="eye" 
draggable="true" id="eye1" ondragstart="drag(event)" />     
 <img src="eye2.png" alt="eye" 
draggable="true" id="eye2" ondragstart="drag(event)" />      
<img src="nose2.png" alt="nose" 
draggable="true" id="nose2" ondragstart="drag(event)" />     
 <img src="eye4.png" alt="eye" 
draggable="true" id="eye4" ondragstart="drag(event)" />      
<img src="nose1.png" alt="nose" 
draggable="true" id="nose1" ondragstart="drag(event)" />      
<img src="eye3.png" alt="eye" 
draggable="true" id="eye3" ondragstart="drag(event)" />     
 <img src="smile1.png" alt="smile" 
draggable="true" id="smile1" ondragstart="drag(event)" />     
<img src="smile3.png" alt="smile" 
draggable="true" id="smile2" ondragstart="drag(event)" />      
<img src="smile2.png" alt="smile" 
draggable="true" id="smile3" ondragstart="drag(event)" />     
</div>     
<div style="float:left;">       
<a href="DragnDrop.html"
 title="Click here to reset" style="text-decoration:none;">       
<img src="direction.png" width="125" height="100" onclick="" />       
</a>     
</div>      
<div id="div1" style="width:300px;height:300px;float:left;">      
<table class="face">            
<tr>                 
<td colspan="2" style="width:100%;">&nbsp;</td>            
 </tr>             
 <tr>                  
<td colspan="2" style="width:100%;">&nbsp;</td>              
</tr>              
<tr>                  
<td id="eye" style="width:50%" 
ondrop="drop(event)" ondragover="allowDrop(event)">
</td>                  
<td id="eye" style="width:50%" 
ondrop="drop(event)" ondragover="allowDrop(event)">
</td>              
</tr>              
<tr>                  
<td id="nose" ondrop="drop(event)"
 ondragover="allowDrop(event)" colspan="2"></td>              
</tr>              
<tr>                  
<td id="smile" ondrop="drop(event)" 
ondragover="allowDrop(event)" colspan="2"></td>              
</tr>          
</table>      
</div>

输出:

JS 代码:

function allowDrop(ev) 
{  ev.preventDefault();  
}    
function drag(ev) {    
ev.dataTransfer.effectAllowed = 'copy';   
 ev.dataTransfer.setData("text", ev.target.id); 
 }    function drop(ev) {    
ev.preventDefault();   
 var data = 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.  添加页面元素:

<input type="button" value="Get My Location" />

JS 代码:

<script type=&rdquo;text/Javascript&rdquo;>  
var x = document.getElementById("lblDisplay");    
function getLocation() {    
document.getElementById("header").value 
= "Static Location";     
if (navigator.geolocation) {     
 var opt = {                     
 timeout: 6000,                     
 maximumAge: 60000,                     
 enableHighAccuracy: true                 
 };      
navigator.geolocation.getCurrentPosition
(showPosition, errorCallBack, opt);    
 }      
else {        
alert('No support for geolocation');    
 }  }           
 function showPosition(position) 
{    
x.innerHTML = "Latitude: " 
+ position.coords.latitude +             
 "Longitude: " + position.coords.longitude;  
}   
 function errorCallBack(e) {     
 switch (e)      {                 
 case e.PERMISSION_DENIED:         
x.innerHTML = "User denied geolocation request";                     
break;                  
case e.POSITION_UNAVAILABLE:        
 x.innerHTML = "No position information available";                      
break;                 
 case e.TIMEOUT:        
 x.innerHTML = "Timeout occured";                     
 break;                  
case e.UNKNOWN_ERROR:          
x.innerHTML = "Unknown error";                     
 break;        
}   }  
</script>

执行:

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

1. 初始化

<input type="button" value="Get My Location Updated" />

2. JS代码

varwatchid;  
function getUpdatedLocation() 
{   
 document.getElementById("header").value = 
"Dynamic Location";    
if (navigator.geolocation) {     
 var opt = {                  
timeout: 500,                 
 maximumAge: 1000,                  
enableHighAccuracy: true               
};    
 watchid = navigator.geolocation.watchPosition
(showPosition, errorCallBack, opt);   
 }     
else {                 
 // no native support; maybe try a fallback?  
  }  }

持续更新位置信息

JS代码:

function stopUpdatingLocation() {
   if (navigator.geolocation) {
   navigator.geolocation.clearWatch(watchid);
  }
}

输出:

7. 使用Google地图

1. 创建HTML 页面

2. 添加GOOGLE 地图的引用

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

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

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

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

5. js 代码:
<script type="text/javascript">    
function GetMyDirection() 
{        
if (navigator.geolocation) 
{        
 var opt = {                     
 timeout: 500,                     
 maximumAge: 1000,                      
enableHighAccuracy: true                  
};         
navigator.geolocation.
getCurrentPosition(showPosition, 
errorCallBack, opt);        
}         
else {            
alert('No support for geolocation');                   
 }  }    
function showPosition(position) {   
 showInMap(position.coords.latitude, 
position.coords.longitude);  }    
function showInMap(lat, lang) {     
 vardirectionsService = new 
google.maps.DirectionsService();    
vardirectionsRenderer = new 
google.maps.DirectionsRenderer();     
 var route = {                  
origin: new google.maps.LatLng(lat, lang),                  
destination: 
document.getElementById('txtDestination').
value, travelMode: 
google.maps.DirectionsTravelMode.DRIVING    
 };     varmapOptions = {                  
zoom: 10,                  
center: new google.maps.LatLng
(50.8504500, 4.3487800),mapTypeId: 
google.maps.MapTypeId.ROADMAP   };     
 var map = new google.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);   
 }    });  }   
 function errorCallBack(e) {              
switch (e) {                  
case e.PERMISSION_DENIED:                 
 x.innerHTML = 
"User denied geolocation request";                      
break;                  
case e.POSITION_UNAVAILABLE:                 
 x.innerHTML = "No position information available";                     
 break;                  
case e.TIMEOUT:                  
x.innerHTML = "Timeout occured";                     
 break;                  
case e.UNKNOWN_ERROR:                   
x.innerHTML = "Unknown error";                     
 break;             
 }  }  
</script>
 

运行:

   
863 次浏览  评价: 差  订阅 捐助
 
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
 
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
 
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
 

十天学会DIV+CSS(WEB标准)
HTML 5的革新:结构之美
介绍27款经典的CSS框架
35个有创意的404错误页面
最容易犯的13个JavaScript错误
设计易理解和操作的网站
更多...   


设计模式原理与应用
从需求过渡到设计
软件设计原理与实践
如何编写高质量代码
单元测试、重构及持续集成
软件开发过程指南


东软集团 代码重构
某金融软件服务商 技术文档
中达电通 设计模式原理与实践
法国电信 技术文档编写与管理
西门子 嵌入式设计模式
中新大东方人寿 技术文档编写
更多...   
 
 
 
 
 
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号