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

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>

运行：