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

简介: 目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息      多媒体是互联网中的最重要的一部分,无论访问的是哪种类型的网页,视频或音频触手可及,在之前实现这些功能对开发人员来说可能非常痛苦,必须依赖Object 标签,调用第三方软件来加载,如Flash等,如果有些设备不支持Flash,我们对此就束手无策了。

目录

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>

运行:

 

 

 
相关文章
|
1月前
|
移动开发 开发者 UED
HTML5 语义元素详解
HTML5引入了诸多语义元素
|
26天前
|
编解码 前端开发 UED
HTML多媒体格式支持与优化
在HTML中,多媒体格式的支持与优化至关重要。使用`&lt;audio&gt;`、`&lt;video&gt;`和`&lt;img&gt;`标签可分别嵌入音频、视频和图像。支持的格式包括MP3、OGG、JPEG等。为优化体验,应压缩文件、采用响应式设计、使用懒加载,并考虑转码及CDN托管。此外,添加字幕和描述文件可提高辅助功能。遵循这些最佳实践,能显著提升多媒体内容的加载速度与用户满意度。
WK
|
26天前
|
存储 移动开发 前端开发
HTML5新增了哪些其他元素和属性
这段文字介绍了HTML5中新增的多种元素和属性,包括页面布局元素如header、nav等,表单元素如email、tel输入框等,以及其他元素如canvas、svg等。此外,还介绍了全局及表单属性,例如contenteditable、placeholder等,这些新功能显著增强了HTML5在现代网页设计与开发中的实用性与灵活性。
WK
46 1
|
2月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
2月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
|
1月前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
WK
|
26天前
|
Web App开发 存储 移动开发
HTML5新增了哪些表单元素
HTML5通过新增多种表单元素和属性,提升了用户体验与交互性。例如,`email`和`url`元素分别验证邮箱地址和网址格式;`number`和`range`便于输入数字及区间值;`date`等元素简化了日期时间的选择;`search`添加搜索图标,`color`提供颜色选择器;`datalist`结合`input`属性给予用户下拉列表选项;`keygen`用于生成密钥对以增强安全性;`output`则用于动态展示计算结果。这些改进共同提高了表单的功能性和易用性。
WK
19 2
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
25 2
|
18天前
|
数据采集 数据安全/隐私保护
html常见的表单元素有哪些,html表单元素有哪些?
html常见的表单元素有哪些,html表单元素有哪些?
12 0