碼上快樂

相關內容    簡體    繁體

HTML5詳解

本文轉載自   查看原文   2017-04-07 02:34   2683 

  HTML5的概念  

　　HTML5並不僅僅是作為HTML標記語言的一個最新版本,更重要的是它制定了web應用開發的一系列標准, 成為第一個將web作為應用程序開發平台的HTML語言

　　HTML5定義了一系列的新元素, 如新語義標簽, 智能表單, 多媒體標簽, 可以幫助開發者創建互聯網應用, 同時有令人眼花的css3, 還提供了一些JavaScript的API(應用程序接口), 列如: 地理定位 重力感應, 硬件訪問, 可以在瀏覽器內實現類似於原生應用, 制作webAPP, 甚至結合Canvas可開發一些網頁板的小游戲啊

　　H5其實只是一個泛稱, 是由HTML5+CSS3+JavaScript等技術結合而成的一個應用開發平台

  HTML5的兼容性   

　　新增的部分有兼容性的問題, 並不是所有的html5都是IE9兼容的, 有一些屬性是需要IE10或者更高級的瀏覽器才能兼容, 所以, html5更多應用在移動端的方面, 因為移動端搭載的瀏覽器比較高級

  HTML5的骨架  

　　代碼示例:

　　<!DOCTYPE html>
　　<html lang="en">
　　　　<head>
   　　　　 <meta charset="UTF-8">
   　　 　　<title>Title</title>
    　　　　<style>
     
    　　　　</style>
   
　　　　</head>
　　　　<body>

　　　　</body>
　　</html>
HTML5骨架是沒有兼容的問題的

反問：如果在xt的文檔DTD里面書寫h5的內容，會帶來兼容問題么？

答：跟你用什么文檔DTD沒有關系 主要跟瀏覽器有關系

 
        
html5新增的標簽
 
        
 
        
新增的6大結構標簽：
 
        
 
        
（1）header  網站頭部 （2）nav 導航欄（3）section 類似於div （4）aside  文件側欄（5）article  文章/文本內容（6）footer  網站腳部
 
         
         
        
 
        
作用：跟div一模一樣 ，就是增加了語義性 更加利於seo優化
 
        
 
        
由於html5新增的標簽有兼容問題，所以我們需要做兼容！怎么實現？
 
        
 
        
（1）利用document.creatElement()去創建html5的新標簽，同時設置成塊元素（相對麻煩）
 
        
 
        
1 <!--[if lt IE 9]>
 
        
 
        
2         <script type="text/javascript">
 
        
 
        
3     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
 
        
 
        
4     var i= e.length;
 
        
 
        
5     while (i--){
 
        
 
        
6          document.createElement(e[i])
 
        
 
        
7     }  
 
         
         
        
 
        
8 </script>
 
        
 
        
9     <![endif]-->
 
        
 
        
（1）借助於第三方的JS框架 =>html5shiv.min.js （推薦）配合IE的hack實現最佳兼容
 
        
 
        
10 <!--[if lt IE 9]>
 
        
 
        
11   <script src="js/html5shiv.min.js"></script>
 
        
 
        
12 <![endif]-->
 
        
 
        
注明：還有一些新增的用到的不多，所以了解即可，上述六個結構標簽是最為常用的
 
        
 
        
html5新增的智能表單
 
        
 
        
以前學過 type =text ，submit ，reset，radio。。。。
 
        
type="email"  限制用戶輸入必須為Email類型 
 
        
type="url"   限制用戶輸入必須為URL類型
 
         
         
        
type="date"  自動生成一個日期控件
 
        
type="number"  限制用戶輸入必須為數字類型 
 
        
type="range"   產生一個進度條的表單
 
        
 
 
        
 
 
        
type="search"  產生一個搜索意義的表單
 
        
type="color"   生成一個顏色選擇表單
 
        
總結：智能表單的兼容比較大，在移動端用的較多，移動端會自動調取手機本身的控件（不同手機之間會略有不同，但如果需要高度自定義，就需要用JS去寫了）
 
        
智能驗證表單
 
        
（1）required => 驗證表單是否為空，必須配合form表單來使用
 
        
（2）pattern => 自定義驗證表單規則，匹配正則 一般用於設置用戶名的格式, 或者密碼的難度
 
        
（3）invalid => 驗證失敗的時候觸發的事件
 
        
（4）dom.setCustomValidity() => 自定義彈出的內容 參數：string 自定義的內容
 
        
 
 
        
表單的新屬性
 
        
 
 
        
（1）placeholder => 占位文本，體驗更加
 
        
 
 
        
（2）autofocus => 自動獲取焦點   dom.focus（）
 
        
 
 
        
（3）autocompleted => 提交一次后下次自動補全 注意：必須提交一次之后，同時必須要有name屬性
 
        
 
 
        
（4）multiple => 配合file控件實現多選
 
        
 
 
        
（5）form => 配合form表單的id值實現關聯，在任意位置都可以被提交，但是不建議這么寫
 
        
　　代碼示例:　　　
 
        
<body>
　　<!--autocomplete :自動完成-->
　　<form action="">
   　　 placeholder可以創建用戶提示：<input type="text" placeholder="請輸入用戶名" autocomplete="on"> <br>
   　　 autofocus:可以自動獲取焦點：<input type="text" placeholder="請輸入學號" autofocus> <br>
    　　multiple 文件上傳多選或多個郵箱地址: <input type="file" multiple id="myFile" name="myFile"> <br>
    　　required 驗證條件，必填項: <input type="email" required> <br>
    　　pattern 正則表達式 驗證表單: <input type="tel" pattern="^1\d{10}$" required>
    　　<input type="submit" id="submit">
　　</form>
　　<script>
    　　var reg=/^1\d{10}$/;
    　　document.getElementById("submit").onclick=function(){
        　　var file=document.getElementById("myFile");
        　　console.log(file.files[0]);
        　　/*文件上傳：獲取文件，進行上傳*/
   　　 }
</script>
 
        
 
 
        
 
 
        
智能感應
 
        
 
 
        
利用表單的list=“datalist的id值”與datalist這個標簽取得聯系實現的
 
        
 
 
        
<input type="text" id="collge" placeholder="請選擇" list="collgeList">
<datalist id="collgeList">
    <option>前端</option>
    <option>IOS</option>
    <option>C++</option>
</datalist>
 
        
html5調用視頻
 
        
直到現在，我們的視頻依舊采用第三方的網站播放視頻，並且需要借助於flash技術
 
        
在html5中，我們只需要借助於video這個標簽來實現視頻的播放
 
        
標簽：video
 
        
標簽屬性：
 
        
（1）autoplay =>視頻默認加載完播放
 
        
（2）controls =>播放的控件
 
        
（3）loop =>控制循環
 
        
（4）poster =>在視頻沒有播放的時候的預覽圖片
 
        
 
        
我們發現每一個瀏覽器支持的格式都不一樣，所以我們需要利用source標簽實現兼容（MP4格式已經全被兼容）
 
        
視頻的API：（注：是JS的，JQ去使用需要轉化對象）
 
        
（1）play（）//控制視頻播放
 
        
（2）pause（）//控制視頻暫停
 
        
（3）load（）//重新加載視頻或者音頻
 
        
音頻：audio的用法與視頻一模一樣
 
        
 代碼示例:  視頻
 
        
<!--controls:是否顯示控制面板-->
<!--autoplay:自動播放-->
<!--loop:循環-->
<!--source:如果默認提供的資源無法播放，那么就會自動的獲取source中指定的資源進行加載-->
<video src="../mp3/cc.mp4" controls  loop type="audio/flv">
    <source src="../mp3/cc.mp4" type="audio/mpeg">
</video>

代碼示例: 音頻
 
        
<!--src:指定的音頻文件的路徑-->
<!--controls:控制面板，默認隱藏，如果需要顯示，則添加這個屬性-->
<!--autoplay：自動播放-->
<!--loop:循環播放-->
<audio src="../mp3/aa.mp3" controls autoplay loop></audio>
 
        
JS獲取元素的新方式
 
        
（1）document.querySelector('selector') 通過CSS選擇器獲取元素，符合匹配條件的第1個元素。可以傳入復合選擇器（如：.box li, .box > li input[type=’button’]）等
 
        
（2）document.querySelectorAll('selector') 通過CSS選擇器獲取元素，以類數組形式存在。可以傳入復合選擇器（如：.box li, .box > li input[type=’button’]）等
 
        
JS類名操作
 
        
（1）Node.classList.add('class') 添加class
 
        
（2）Node.classList.remove('class') 移除class
 
        
（3）Node.classList.toggle('class') 切換class，有則移除，無則添加
 
        
（4）Node.classList.contains('class') 檢測是否存在class
 
        
Node指一個有效的DOM節點，是一個通稱。 
 
        
自定義屬性
 
        
在HTML5中我們可以自定義屬性，其格式如下data-*=""，例如
 
        
data-info="我是自定義屬性"，通過Node.dataset['info'] 我們便可以獲取到自定義的屬性值。
 
        
Node.dataset是以對象形式存在
 
        
當我們如下格式設置時，則需要以駝峰格式才能正確獲取 
 
        
data-my-name="itcast"，獲取Node.dataset['myName']
 
        
自定義進度條
 
        
（1）Progress
 
        
（2）Meter => 有顏色的切換
 
        
總結：兩種標簽運用的不多，因為不能深度自定義，實際開發中，多是自己用div模擬
 
        
 網絡狀態
 
        
我們可以通過window. navigator.onLine來檢測，用戶當前的網絡狀況，返回一個布爾值
 
        
addEventListener 進行綁定online用戶從無網的網絡狀態被連接時調用
 
        
addEventListener 進行綁定.offline用戶網絡從有網到斷開時被調用
 
        
事件是給window綁訂的
 
        
地理定位
 
        
 
 
        
在HTML規范中，增加了獲取用戶地理信息的API，這樣使得我們可以基於用戶位置開發互聯網應用，即基於位置服務 (Location Base Service)
 
        
 獲取地理信息方式
 
        
1、IP地址
 
        
2、三維坐標
 
        
GPS（Global Positioning System，全球定位系統）
 
        
Wi-Fi
 
        
手機信號
 
        
3、用戶自定義數據
 
        
如下圖對不同獲取方式的優缺點進行了比較，瀏覽器會自動以最優方式去獲取用戶地理信息。
 
        
 
        
 隱私
 
        
HTML5 Geolocation 規范提供了一套保護用戶隱私的機制。必須先得到用戶明確許可，才能獲取用戶的位置信息。
 
        
 
 
        
API詳解
 
        
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 獲取當前地理信息
 
        
navigator.geolocation.watchPosition(successCallback, errorCallback, options) 重復獲取當前地理信息
 
        
1、當成功獲取地理信息后，會調用succssCallback，並返回一個包含位置信息的對象position。
 
        
position.coords.latitude緯度
 
        
position.coords.longitude經度
 
        
position.coords.accuracy精度
 
        
position.coords.altitude海拔高度
 
        
2、當獲取地理信息失敗后，會調用errorCallback，並返回錯誤信息error
 
        
3、可選參數 options 對象可以調整位置信息數據收集方式
 
        
a) enableHighAccuracy 高精度模式
 
        
b) timeout 超時設置，單位為ms
 
        
c) maximumAge表示瀏覽器重新獲取位置信息的時間間隔，單位為ms
 
        
百度地圖的用法：
 
        
官網：http://lbsyun.baidu.com/
 
        
（1）進入官網 直接找到javascript API  
 
        
（2）直接找到示例DEMO，復制源代碼
 
        
（3）需要獲取密鑰 （自己申請，需要一到兩個工作日）
 
        
（4）創建應用（填寫瀏覽器端）
 
        
（5）利用密鑰去替換script標簽里面的“你的密鑰”
 
        
 代碼示例: 
 
        
<!DOCTYPE html>
<html>
<head>
    <title>普通地圖&全景圖</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DarF2LCCGzn6T16zgy8ZPkvYYE5CT6fu"></script>
    <style type="text/css">
        body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
        #panorama {height: 50%;overflow: hidden;}
        #normal_map {height:50%;overflow: hidden;}
    </style>
</head>
<body>
<div id="panorama"></div>
<div id="normal_map"></div>
<script type="text/javascript">
    //全景圖展示
    var panorama = new BMap.Panorama('panorama');
    panorama.setPosition(new BMap.Point(114.189421,22.300401)); //根據經緯度坐標展示全景圖
    panorama.setPov({heading: -40, pitch: 6});

    panorama.addEventListener('position_changed', function(e){ //全景圖位置改變后，普通地圖中心點也隨之改變
        var pos = panorama.getPosition();
        map.setCenter(new BMap.Point(pos.lng, pos.lat));
        marker.setPosition(pos);
    });
    //普通地圖展示
    var mapOption = {
        mapType: BMAP_NORMAL_MAP,
        maxZoom: 18,
        drawMargin:0,
        enableFulltimeSpotClick: true,
        enableHighResolution:true
    }
    var map = new BMap.Map("normal_map", mapOption);
    var testpoint = new BMap.Point(114.189421,22.300401);
    map.centerAndZoom(testpoint, 18);
    var marker=new BMap.Marker(testpoint);
    marker.enableDragging();
    map.addOverlay(marker);
    marker.addEventListener('dragend',function(e){
        panorama.setPosition(e.point); //拖動marker后，全景圖位置也隨着改變
        panorama.setPov({heading: -40, pitch: 6});}
    );
 
        
 Web存儲
 
        
隨着互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由於其存儲大小只有4k左右，並且解析也相當的復雜，每一次發送請求都會攜帶上cookie，會造成帶寬的浪費，給開發帶來諸多不便，HTML5規范則提出解決方案。
 
        
web存儲的含義是將數據存儲到用戶的電腦上，這樣可以緩解服務器的壓力，並且提高體驗
 
        
 特性
 
        
1、設置、讀取方便
 
        
2、容量較大，sessionStorage約5M、localStorage約20M
 
        
3、只能存儲字符串，可以將對象JSON.stringify() 編碼后存儲
 
        
 window.sessionStorage
 
        
1、生命周期為關閉瀏覽器窗口
 
        
2、在同一個窗口下數據可以共享
 
        
補充：通過跳轉可以
 
        
window.localStorage
 
        
1、永久生效，除非手動刪除
 
        
2、可以多窗口共享
 
        
方法詳解
 
        
setItem(key, value) 設置存儲內容
 
        
getItem(key) 讀取存儲內容
 
        
removeItem(key) 刪除鍵值為key的存儲內容
 
        
clear() 清空所有存儲內容
 
        
key(n) 以索引值來獲取存儲內容
 
        
區別：cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。
 
        
差異性：
 
        
相同點：都是存儲數據，存儲在web端，並且都是同源
 
        
 
 
        
不同點：
 
        
（1）cookie 只有4K 小 並且每一次請求都會帶上cookie 體驗不好，浪費帶寬
 
        
（2）session和local直接存儲在本地，請求不會攜帶，並且容量比cookie要大的多
 
        
（3）session 是臨時會話，當窗口被關閉的時候就清除掉 ，而 local永久存在，cookie有過期時間
 
        
（4）cookie 和local都可以支持多窗口共享，而session不支持多窗口共享 但是都支持a鏈接跳轉的新窗口
 
        
 
 
        
 全屏
 
        
HTML5規范允許用戶自定義網頁上任一元素全屏顯示。
 
        
requestFullScreen() 開啟全屏顯示
 
        
cancelFullScreen() 關閉全屏顯示
 
        
 文件讀取
 
        
通過FileReader對象我們可以讀取本地存儲的文件，可以使用 File 對象來指定所要讀取的文件或數據。其中File對象可以是來自用戶在一個 <input> 元素上選擇文件后返回的FileList 對象，也可以來自由拖放操作生成的  DataTransfer
 
        
 FileList對象
 
        
由於HTML5中我們可以通過為表單元素添加multiple屬性，因此我們通過<input>上傳文件后得到的是一個FileList對象（偽數組形式）。
 
        
  FileReader對象
 
        
HTML5新增內建對象，可以讀取本地文件內容。
 
        
var reader = new FileReader; 可以實例化一個對象
 
        
實例方法
 
        
1、readAsDataURL() 以DataURL形式讀取文件
 
        
事件監聽
 
        
onload 當文讀取完成時調用
 
        
屬性
 
        
result 文件讀取結果
 
        
參考資料
 
        
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc
 
        
 拖拽
 
        
在HTML5的規范中，我們可以通過為元素增加draggable="true"來設置此元素是否可以進行拖拽操作，其中圖片、鏈接默認是開啟的。
 
        
 拖拽元素
 
        
 定義和用法：拖放是 HTML5 中非常常見的功能。
 
        
     
         
  1. 在拖放的過程中會觸發以下事件：
    2.  
        
 
        
a) 在拖動目標上觸發事件 (源元素):
 
        
     
         
  • ondragstart - 用戶開始拖動元素時觸發
    •  
         
  • ondrag - 元素正在拖動時觸發
    •  
         
  • ondragend - 用戶完成元素拖動后觸發
    •  
        
 
        
b) 釋放目標時觸發的事件—   當拖拽元素在目標容器上進行操作的時候:
 
        
     
         
  • ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件
    •  
         
  • ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
    •  
         
  • ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件
    •  
         
  • ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
    •  
        
 
        
     
         
  1. 注意：  
          
       
           
    1. 在拖動元素時，每隔 350 毫秒會觸發 ondrag 事件。
      2.  
           
    2. 為了讓元素可拖動，需要使用 HTML5 draggable 屬性
      3.  
           
    3. 鏈接和圖片默認是可拖動的，不需要 draggable 屬性
      4.  
           
    4. 可以通過addEventListener來添加拖拽相關事件
      5.  
           
    5. 事件源：觸發事件的源，一般情況下我們會將相同操作的多個對象綁定到同一個處理事件，同時傳遞當前的對象到處理方法，這就是事件源參數
      6.  
          
    2.  
         
  2. 小案例：實現元素的拖拽操作：
    3.  
         
  3. 效果：
    4.  
        
 
        
     
         
  1. 網頁結構代碼：
    2.  
        
 
        
<!--標記是否可以拖動，true表示可以拖動-->
<div class="div1">
    <p draggable="true" id="pe">試着把我拖過去</p>
</div>
<div class="div2"></div>
 
        
     
         
  1. Js代碼 (幾個事件的說明)：
    2.  
        
 
        
<script>
    /*這幾次拖拽的事件源都是當前被拖拽的元素*/
    /*開始拖拽*/
    document.addEventListener("dragstart",function(e){
        //設置當前目標元素的透明度，產生拖拽效果
        e.target.style.opacity=0.4;
        //將當前的被拖拽元素的id號存儲到事件源對象中
        e.dataTransfer.setData("Text", e.target.id);
    });
  /*拖拽進行中*/
    document.addEventListener("drag",function(e){
        e.target.parentNode.style.borderColor="green";
    });
    /*拖拽結束*/
    document.addEventListener("dragend",function(e){
        e.target.style.opacity=1;
        e.target.parentNode.style.borderColor="red";
    });

    /*下面幾個方法的事件源是目標元素，而不是被拖拽的元素*/
    /*當將當前元素拖拽到另外一個元素上時觸發*/
    document.addEventListener("dragenter",function(e){
        if(e.target.className=="div2"){
            e.target.style.borderColor="pink";
        }
        else if(e.target.className=="div1"){
            e.target.style.borderColor="red";
        }
    });

    /*拖拽元素在目標元素上移動時觸發*/
    document.addEventListener("dragover",function(e){
        /*默認情況下，一個元素不能拖拽到另外一個元素內，如果想允許拖拽，我們必須阻止默認的事件冒泡*/
        e.preventDefault();
    });
    /*當拖拽元素離開目標元素時觸發*/
    document.addEventListener("dragleave",function(e){
        if(e.target.className=="div2"){
            e.target.style.borderColor="blue";
        }
    });
    /*當拖拽元素在目標元素上松開的時候觸發*/
    document.addEventListener("drop",function(e){
        //1.阻止事件冒泡
        e.preventDefault();
        if(e.target.className=="div2" || e.target.className=="div1"){
            //2.還原目標元素的默認樣式
            e.target.style.borderColor="blue";
            //3.獲取被拖拽元素的id
            var id= e.dataTransfer.getData("Text");
            //4.追加被拖拽元素到目標元素
            e.target.appendChild(document.getElementById(id));
        }
    });
</script>
 
        
 多媒體
 
        
     
         
  1. 常用方法：load() 加載、  play() 播放、  pause() 暫停
    2.  
        
 
        
Jq沒有提供對視頻播放控件的方式，也就意味着如果要操作視頻播放，必須使用原生的js方法
 
        
     
         
  1. 常用屬性：
    2.  
        
 
        
a) currentTime 視頻播放的當前進度、
 
        
b) duration:視頻的總時間  100000/60
 
        
c) paused:視頻播放的狀態.
 
        
     
         
  1. 常用事件：
    2.  
        
 
        
a) oncanplay: 事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。
 
        
b) ontimeupdate:通過該事件來報告當前的播放進度.
 
        
c) onended:播放完時觸發—重置
 
        
參考文檔
 
        
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
 
        
 
 
        
     
         
  1. 頁面結構：
    2.  
        
 
        
<h3 class="playerTitle">視頻播放器</h3>
<div class="player">
    <video src="../mp3/test.mp4"></video>
    <div class="controls">
        <a href="javascript:;" class="switch fa fa-pause"></a>
        <a href="javascript:;" class="expand fa fa-expand"></a>
        <div class="progress">
            <div class="bar"></div>
            <div class="loaded"></div>
            <div class="elapse"></div>
        </div>
        <div class="time">
            <span class="currentTime">00:00:00</span>
            \
            <span class="totalTime">00:00:00</span>
        </div>
    </div>
</div>
 
        
     
         
  1. Js代碼：
    2.  
        
 
        
<script src="../js/jquery.min.js"></script>
<script>
    /*獲取到播放器*/
    var video=$("video")[0];
    /*暫停-播放切換*/
    $(".switch").click(function(){
        //1.切換樣式，從暫停切換到播放，或者從播放切換到暫停
        $(this).toggleClass("fa-pause fa-play");
        //2.修改播放器的狀態
        if(video.paused){
            video.play();
        }
        else{
            video.pause();
        }
    });
    /*全屏*/
    $(".expand").click(function(){
        video.webkitRequestFullScreen();
    });
    /*當可以進行播放的時候觸發oncanplay*/
    video.oncanplay=function(){
        setTimeout(function(){
            video.style.display="block";
            //1.獲取視頻的總時長,結果以秒作為單位
            var duration=video.duration;
            /*console.log(duration);*/  //256.278
            //2.計算 時  分  秒
            var hour= Math.floor(duration/3600);
            var menite= Math.floor(duration%3600/60);
            var second=Math.floor(duration%60);
            //3.將時分秒信息填充到總時長span中
            //3.1 設置時分秒的格式
            hour=hour<10?"0"+hour:hour;
            menite=menite<10?"0"+menite:menite;
            second=second<10?"0"+second:second;
            //3.2填充
            $(".totalTime").html(hour+":"+menite+":"+second);
        },2000);
    }
    /*當視頻在播放的時候，會觸發下下面的方法ontimeupdate*/
    video.ontimeupdate=function(){
        //1.獲取當前已經播放過了時間
        var elapseTime=video.currentTime;
        //2.獲取已過時間的時分秒
        var hour= Math.floor(elapseTime/3600);
        var menite= Math.floor(elapseTime%3600/60);
        var second=Math.floor(elapseTime%60);
        //3.將時分秒信息填充到當前時長span中
        //3.1 設置時分秒的格式
        hour=hour<10?"0"+hour:hour;
        menite=menite<10?"0"+menite:menite;
        second=second<10?"0"+second:second;
        //3.2填充
        $(".currentTime").html(hour+":"+menite+":"+second);
        //4.設置當前<div class="elapse"></div>的寬度
        var valuePercent=0;
        if(elapseTime>0){
            valuePercent=elapseTime/video.duration*100;
            $(".elapse").css("width",valuePercent+"%");
        }
    }
 
        
 
 
       
 
        
       
 
        
 
 
       
 
        
       
 
       
 
      
 
      
 
      
 
     
 
     
 
      
 
      
 
        
       
免責聲明！
 
       
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
 
      
 
      

      
 
     
 
    
 
     
    
 
     
 
      猜您在找 
        HTML5之Viewport詳解  
        HTML5詳解  
        HTML5(八)——SVG 之 path 詳解  
        HTML5之SVG詳解（一）：基本概括  
        HTML5標簽embed詳解  
        html5的web存儲詳解  
        HTML5新特性及詳解  
        Html5 video用法詳解  
        html5的datalist元素詳解  
        HTML5的localStorage緩存詳解  
      
 
      
 
     
 
    
 
   
 
  
 
  

    
  
 
  
 
   
 
   
 
   
 
    粵ICP備18138465號  
    © 2018-2025 CODEPRJ.COM