真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

三天學(xué)會(huì)HTML5——多媒體元素的使用

創(chuàng)新互聯(lián)建站專注于泗洪網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。熱誠(chéng)為您提供泗洪營(yíng)銷型網(wǎng)站建設(shè)，泗洪網(wǎng)站制作、泗洪網(wǎng)頁(yè)設(shè)計(jì)、泗洪網(wǎng)站官網(wǎng)定制、重慶小程序開(kāi)發(fā)公司服務(wù)，打造泗洪網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供泗洪網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

1. HTML5 Media-Video

2. HTML5 Media-Audio

3. 拖拽操作

4. 獲取位置信息

5. 使用Google 地圖獲取位置信息

多媒體是互聯(lián)網(wǎng)中的最重要的一部分，無(wú)論訪問(wèn)的是哪種類型的網(wǎng)頁(yè)，視頻或音頻***，在之前實(shí)現(xiàn)這些功能對(duì)開(kāi)發(fā)人員來(lái)說(shuō)可能非常痛苦，必須依賴Object 標(biāo)簽，調(diào)用第三方軟件來(lái)加載，如Flash等，如果有些設(shè)備不支持Flash，我們對(duì)此就束手無(wú)策了。但是HTML5的出現(xiàn)讓多媒體網(wǎng)頁(yè)開(kāi)發(fā)變得異常簡(jiǎn)單，也形成了新的標(biāo)準(zhǔn)。

1. 使用Video 元素。

在本節(jié)中學(xué)習(xí)如何在HTML5中使用Video 元素

1.準(zhǔn)備視頻資源

2. 創(chuàng)建HTML 頁(yè)面

新建HTML ，并命名為“Media.html”,輸入以下內(nèi)容：

可以觀察到的是video 標(biāo)簽中包含“Controls”,添加該標(biāo)簽可以使得播放器工具欄可見(jiàn)。Control bar 和我們平常所見(jiàn)到的一樣，非常簡(jiǎn)單，包含暫停，播放，停止等按鈕。

注意：

要確保video 和html 文件存放到同一目錄下。如果想放置在不同的目錄下，需要設(shè)置src 屬性。

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

輸出：

三天學(xué)會(huì)HTML5 ——多媒體元素的使用

2. 使用腳本控制Video 元素

1. 創(chuàng)建HTML 頁(yè)面

新建HTML 頁(yè)面“Media01.html”設(shè)置Video 資源 src屬性。在本節(jié)中不使用Controls 屬性來(lái)設(shè)置，使用JS代碼來(lái)實(shí)現(xiàn)。

2. 添加播放，暫停，和聲音調(diào)節(jié)按鈕。

3. 創(chuàng)建JS 函數(shù)來(lái)控制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";
}
}

設(shè)置CurrentTime為6,則表示在第六秒時(shí)視頻停止播放。

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

如下是設(shè)置當(dāng)視頻播放完成之后停止播放：

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

以下代碼是將聲音調(diào)節(jié)控制到0-1之間：

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

輸出：

三天學(xué)會(huì)HTML5 ——多媒體元素的使用

3. Audio 元素

HTML5使得在頁(yè)面中加載音頻元素變得非常簡(jiǎn)單。

1. 準(zhǔn)備音頻資源

2. 新建HTML頁(yè)面，輸入以下內(nèi)容：

3. 輸出：

三天學(xué)會(huì)HTML5 ——多媒體元素的使用

4. 使用腳本添加音頻元素

1.新建HTML頁(yè)面

2. 添加播放，暫停及音量鍵

3. 創(chuàng)建JS 函數(shù)來(lái)控制音頻播放。代碼如下：

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";
   }
}

同上，設(shè)置在第6秒停止播放：

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

5. 拖拽操作的實(shí)現(xiàn)

在之前，實(shí)現(xiàn)拖拽操作都是開(kāi)發(fā)人員自定義邏輯來(lái)實(shí)現(xiàn)，但是HTML5提供了拖拽API ，使得拖拽操作的實(shí)現(xiàn)變得如此簡(jiǎn)單。

1. 準(zhǔn)備資源（圖片資源）

2. 設(shè)置draggable 屬性

3. 輸出

三天學(xué)會(huì)HTML5 ——多媒體元素的使用

4. 實(shí)現(xiàn)drag 事件

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

5. drog 操作

輸出：

三天學(xué)會(huì)HTML5 ——多媒體元素的使用

ondragover 事件制定被拖拽的數(shù)據(jù)。

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

當(dāng)拖拽的元素被鼠標(biāo)釋放時(shí)，自動(dòng)調(diào)用ondrop 事件

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

輸出：

三天學(xué)會(huì)HTML5 ——多媒體元素的使用

6. 復(fù)雜的拖拽操作實(shí)現(xiàn)

新建HTML頁(yè)面，HTML & Css 代碼如下：

 Create the face

輸出：

三天學(xué)會(huì)HTML5 ——多媒體元素的使用

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));
  }
}

運(yùn)行：

三天學(xué)會(huì)HTML5 ——多媒體元素的使用

7. 地理位置信息的獲取

HTML5 可以共享位置信息，精度和維度都可以通過(guò)JS事件來(lái)捕捉并返回給服務(wù)器來(lái)在google 地圖中定位。

初始化：

1. 創(chuàng)建html 頁(yè)面 Geolocation.html;

2. 添加頁(yè)面元素：

JS 代碼：


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;
      }
 }

執(zhí)行：

三天學(xué)會(huì)HTML5 ——多媒體元素的使用

如何實(shí)現(xiàn)自定更新位置信息呢？

1. 初始化

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?
  }
}

持續(xù)更新位置信息

JS代碼：

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

輸出：

三天學(xué)會(huì)HTML5 ——多媒體元素的使用

7. 使用Google地圖

1. 創(chuàng)建HTML 頁(yè)面

2. 添加GOOGLE 地圖的引用

3. 添加div 元素，并加載地圖

4. 添加點(diǎn)擊按鈕來(lái)加載地圖并輸入目的地

5. js 代碼：



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;
            }
}

運(yùn)行：

三天學(xué)會(huì)HTML5 ——多媒體元素的使用