HTML5新增元素

weixin_34236869發表於2016-07-13
HTML

title: HTML5新增元素
date : 2016-09-13
tags : HTML5

0X01 HTML5新增主體元素

header,nav,aside,section,article,footer

0x02 HTML5新增非主體元素

datalist

datalist 要結合 input 元素使用，並且通過的 input 的 list 屬於與其關聯。

<input type="text" id="list" list="showData">
<datalist id="showData">
    <option value="boy"></option>
    <option value="girl"></option>
    <option value="woman"></option>
    <option value="man"></option>
</datalist>
progress

表示一個任務的完成進度，而且通常這些任務都在表單中啟動和處理。

<progress value="10" max="50">

vaule:表示處理進度的程度
max:表示任務完成以後達到的值

meter

與 <progress> 類似，用於顯示刻度或精度而非進度。

<meter max="100" min="25" low="40" hight="100" optimum="50" value="15"></meter>
output

用於顯示錶單元素處理的結果值。for 將 output 元素與參與計算的元素相關聯起來。

0x03 HTML5新增文字框元素

email
<input type="email" />

當在 form 表單中，當輸入郵箱地址提交請求時，將會自動驗證輸入郵箱格式是否正確

tel
<input type="tel" />

tel 在主要功能作用是針對不同的裝置自動跳出響應的數字鍵盤，這個主要是針對移動端的。它不會去驗證輸入的電話號碼的格式。

number
<input type="number" step="10" min="100" max="1000"/>

number 只能接受數字型別的值。其中:

min:表示能輸入的最小值
max:表示能輸入的最大值
step:表示每次調整的增量

range
<input type="range" min="1000" max="15000" step="1000" value="5000" />

range 允許使用者選擇一範圍的數值。

date
time
color

0x03 HTML5新增音視訊元素

vedio

vedio 元素提供了 播放、暫停和音量控制元件來控制視訊，也提供了 width 和 height 屬性控制視訊的尺寸.如果設定的高度和寬度等

vedio 元素有如下屬性值：

  • width/height: 設定 vedio 元素的寬度和高度
  • src/source: 設定視訊流的儲存路勁
  • autoplay:視訊自動播放
  • controls:顯示 video 元素自帶的控制元件 controls
  • poster:指定一個圖片路徑，在視訊等待播放時顯示一幅圖片。
  • preload:有三個值:none,metadata,auto。值為none 不快取視訊；metadata 播放前只載入視訊的寬高等資訊;auto 預設值，要求瀏覽器儘快下載視訊。
  • loop:反覆播放視訊
<video src="臭屁蟲2.mp4" width="400" height="400" controls="controls" autoplay="autoplay" loop="loop" ></video>

視訊事件

視訊處理事件:

  • play():播放媒體檔案
  • load():載入媒體檔案，動態應用程式可以使用該方法提前載入
  • canPlayType(type):檢視瀏覽器是否支援某種型別的媒體格式
  • progress(): 用於更新資源的下載進度，會週期性的觸發。
  • canplaythrough():當整個媒體可以順序播放時，觸發該事件。
  • canplay():不考慮整體狀態，只有下載了一定可放的幀變化觸發該事件

針對視訊處理的常用屬性如下：

  • ended:媒體播發完成時該屬性返回 true
  • paused:暫停播放時，該屬性返回 true
  • duration:返回播放時長，以秒為單位
  • currentTime:獲得或設定媒體播放位置
  • error:播發錯誤時觸發

一個簡單的視訊處理控制元件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>video</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">

        #videoBox{
            width:600px;
            height: 500px;
            position: relative;
        }
        #contronlBtn{
            border:1px solid red;
            width: 40px;
            height: 40px;
        }

        #progressVedio{
            width: 400px;
        }
        
        #showTime{
            width: 40px;
            height: 20px;
            border:1px solid red;
            display: block;
            position: absolute;
            top:400px;
        }

    </style>
</head>
<body>

    <div id="videoBox">
        <video id="videoSource" src="臭屁蟲4.mp4" width="400" height="400" controls="controls" autoplay="autoplay" loop="loop" ></video>
        <span id="showTime"></span>
        <button id="contronlBtn">播放</button>        
        <progress id="progressVedio" value="0" max=""></progress>
        <span id="progressTime"></span>
        <span id="totalTime"></span>        
        </div>
    </body>
    <script type="text/javascript">
        var contronlBtn = document.querySelector("#contronlBtn")
        var videoSource = document.querySelector("#videoSource")
        var progressVedio = document.querySelector("#progressVedio")
        var totalTime = document.querySelector("#totalTime")
        var progressTime = document.querySelector("#progressTime")
        var showTime = document.querySelector("#showTime")

        var timer = null;

        window.onload = function(){     
            var countTime = parseInt(videoSource.duration)
            progressVedio.max = countTime
            totalTime.innerHTML = "時間:"+ parseInt(countTime/60)+":"+(countTime%60);
            contronlBtn.onclick = function (){
                if(videoSource.paused){
                    videoSource.play()
                    contronlBtn.innerHTML = "Pause"
                }else if(videoSource.play){
                    videoSource.pause()
            contronlBtn.innerHTML = "Play"
        }
    }
    
    timer = setInterval(function(){
        var nowTime =  parseInt(videoSource.currentTime)
        progressVedio.value = nowTime
        progressTime.innerHTML = parseInt(nowTime/60) + ":" + (nowTime%60);
    },1000)

    progressVedio.onmouseover = function(event){
         var mourseTime = parseInt(countTime/progressVedio.offsetWidth*(event.clientX - progressVedio.offsetLeft))
         showTime.innerHTML = ""+ parseInt(mourseTime/60)+":"+(mourseTime%60);
         showTime.style.left = event.clientX + "px"
    }

    progressVedio.onclick = function(event){
        videoSource.currentTime = countTime/progressVedio.offsetWidth*(event.clientX - progressVedio.offsetLeft)
    }

}

</script>
</html>

相關文章