從零開始學 Web 之 HTML5（四）拖拽接口，Web存儲，自定義播放器

時間 2019-11-17

標籤開始 web html5 html 接口存儲自定義播放欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！css

1、拖拽接口

元素拖拽事件：html

ondrag ：應用於拖拽元素，整個拖拽過程都會持續調用；
ondragstart：應用於拖拽元素，當拖拽開始時調用；
ondragleave：應用於拖拽元素，拖拽過程當中，當鼠標離開拖拽元素範圍時調用；
ondragend ：應用於拖拽元素，當拖拽結束時調用。前端

目標拖拽事件：java

ondragenter：應用於目標元素，當拖拽元素進入時調用；
ondragover：應用於目標元素，當停留在目標元素上時調用；
ondrop：應用於目標元素，當在目標元素上鬆開鼠標時調用；
ondragleave：應用於目標元素，當鼠標離開目標元素時調用。jquery

示例：將一個div中的p標籤拖拽到另外一個p標籤中git

<body>
<div class="div1" id="div1">
    <!--在h5中，若是想拖拽元素，就必須爲元素添加draggable="true". 圖片和超連接默認就能夠拖拽-->
    <p id="pe" draggable="true">試着把我拖過去</p>
</div>
<div class="div2" id="div2"></div>
<script>
    /*學習拖拽，主要就是學習拖拽事件*/
    var p=document.querySelector("#pe");
    var div2=document.querySelector("#div2");

    // 應用於被拖拽元素
    p.ondragstart=function(){
        console.log("ondragstart");
    }
    p.ondragend=function(){
        console.log("ondragend");
    }
    p.ondragleave=function(){
        console.log("被拖拽元素：ondragleave");
    }
    p.ondrag=function(){
        console.log("ondrag");
    }

    // 應用於目標元素的事件
    div2.ondragenter=function(){
        console.log("ondragenter");
    }
    div2.ondragover=function(e){
        console.log("ondragover");
        /*若是想觸發ondrop事件，那麼就必須在這個位置阻止瀏覽器的默認行爲*/
        e.preventDefault();
    }
    /*瀏覽器默認會阻止ondrop事件：咱們必須在ondragover中阻止瀏覽器的默認行爲*/
    div2.ondrop=function(){
        console.log("ondrop");
        /*添加被拖拽的元素到當前目標元素*/
        div2.appendChild(p);
    }
    div2.ondragleave=function(){
        console.log("目標元素：ondragleave");
    }
</script>
</body>

一、被拖拽的元素必須添加 draggable="true" 屬性。github

二、瀏覽器默認會阻止目標元素的 ondrop 事件：咱們必須在目標元素的 ondragover 中阻止瀏覽器的默認行爲（使用事件參數對象的 preventDefault()方法），才能將拖拽的元素放到目標元素中。web

遺留問題：若是有多個 div，那麼每一個 div 都必須寫 ondragover 和 ondrop 事件觸發的處理函數，也就是隻能拖拽指定的元素到指定的元素中，這樣代碼的可用性就很低了。瀏覽器

分析問題：既然有多個被拖拽元素和多個目標元素存在，這些元素都存在於 document 中的，那麼可不能夠給 document 添加這些事件呢？

答案是能夠的。

<body>
<div class="div1" id="div1">
    <p id="pe" draggable="true">試着把我拖過去</p>
    <p id="pe1" draggable="true">試着也把我拖過去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>
    var obj=null;//當前被拖拽的地元素

    //應用於被拖拽元素的事件
    document.ondragstart=function(e){
        obj= e.target;
    }

    //應用於目標元素的事件
    document.ondragover=function(e){
        /*若是想觸發ondrop事件，那麼就必須在這個位置阻止瀏覽器的默認行爲*/
        e.preventDefault();
    }
    /*瀏覽器默認會阻止ondrop事件：咱們必須在ondragover中阻止瀏覽器的默認行爲*/
    document.ondrop=function(e){
        /*添加元素*/
        e.target.appendChild(obj);
    }
</script>
</body>

在事件參數對象中有一個 target 屬性，其值爲被拖拽的元素對象。

問題解決了，可是，又是可是......，可是通常少使用全局變量，全局變量誰均可以修改，容易誤操做。

在事件參數對象中有一個 dataTransfer 屬性，經過 dataTransfer 來實現數據的存儲與獲取。

dataTransfer 有兩個方法：

setData(format,data);用於存儲數據；

getData(format,data); 用於取出數據；（取出數據必須在目標元素的 ondrop 事件中，其餘事件中沒法取到數據）

format:數據的類型：text/html ，text/uri-list
Data:數據:通常來講是字符串值

<body>
<div class="div1" id="div1">
    <!--在h5中，若是想拖拽元素，就必須爲元素添加draggable="true". 圖片和超連接默認就能夠拖拽-->
    <p id="pe" draggable="true">試着把我拖過去</p>
    <p id="pe1" draggable="true">試着也把我拖過去</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>

    //應用於被拖拽元素的事件
    document.ondragstart=function(e){
        // 把拖拽元素的id值存儲起來
        e.dataTransfer.setData("text/html", e.target.id);
    };

    //應用於目標元素的事件
    document.ondragover=function(e){
        /*若是想觸發ondrop事件，那麼就必須在這個位置阻止瀏覽器的默認行爲*/
        e.preventDefault();
    };
    /*瀏覽器默認會阻止ondrop事件：咱們必須在ondragover中阻止瀏覽器的默認行爲*/
    document.ondrop=function(e){
        /*添加元素*/
        /*經過e.dataTransfer.setData存儲的數據，只能在drop事件中獲取*/
        var id=e.dataTransfer.getData("text/html");
        // 經過id方式添加元素
        e.target.appendChild(document.getElementById(id));
    };
</script>
</body>

2、Web存儲

用戶在瀏覽網頁的時候，可能須要存儲一些數據在本地，以前是採用 Cookie 的方式存儲，可是 Cookie 只能存儲大小爲 4k 之內的數據，再多的數據就存儲不了。而且 Cookie 的解析也是很複雜的。

到了h5階段，又提供了兩種方式來存儲 web 數據：sessionStorage 和 localStorage。

一、sessionStorage

sessionStorage的使用：將存儲數據到本地。存儲的容量 5MB 左右。

注意：sessionStorage 的存儲特色：

這個數據本質是存儲在當前頁面的內存中，意味着其它頁面和瀏覽器沒法獲取數據。
它的生命週期爲關閉當前頁面時，數據會自動清除。

提供的方法：

setItem(key,value) ：存儲數據，以鍵值對的方式存儲，
getItem(key) ：獲取數據，經過指定名稱的key獲取對應的value值，
removeItem(key) ：刪除數據，經過指定名稱key刪除對應的值，
clear() ：清空全部存儲的內容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<pre>
sessionStorage的使用
</pre><br>
<input type="text" id="userName"><br>
<input type="button" value="設置數據" id="setData">
<input type="button" value="獲取數據" id="getData">
<input type="button" value="刪除數據" id="removeData">
<script>
    /*存儲數據*/
    document.querySelector("#setData").onclick=function(){
        /*獲取用戶名*/
        var name=document.querySelector("#userName").value;
        /*存儲數據*/
        window.sessionStorage.setItem("userName",name);
    };
    /*獲取數據*/
    document.querySelector("#getData").onclick=function(){
        /*若是找不到對應名稱的key,那麼就會獲取null*/
        var name=window.sessionStorage.getItem("userName");
        alert(name);
    };
    /*刪除數據*/
    document.querySelector("#removeData").onclick=function(){
        /*在刪除的時候若是key值錯誤，不會報錯，可是也不會刪除數據*/
        window.sessionStorage.removeItem("userName");
    };
</script>
</body>
</html>

一、獲取數據的時候，若是找不到對應名稱的 key，那麼獲取的值爲 null。

二、刪除數據的時候，若是 key 值錯誤，不會報錯，可是也不會刪除數據。

二、localStorage

localStorage的使用：

存儲的內容大概 20MB 大小
不一樣瀏覽器不能共享數據。可是在同一個瀏覽器的不一樣窗口中能夠共享數據；
永久生效，它的數據是存儲在硬盤上，並不會隨着頁面或者瀏覽器的關閉而清除。若是想清除，必須手動清除

setItem(key,value):存儲數據，以鍵值對的方式存儲
getItem(key):獲取數據，經過指定名稱的key獲取對應的value值
removeItem(key):刪除數據，經過指定名稱key刪除對應的值
clear():清空全部存儲的內容

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<pre>localStorage的使用：</pre>
<br>
<input type="text" id="userName"><br>
<input type="button" value="設置數據" id="setData">
<input type="button" value="獲取數據" id="getData">
<input type="button" value="刪除數據" id="removeData">

<script>
    document.querySelector("#setData").onclick=function(){
        var name=document.querySelector("#userName").value;
        /*使用localStorage存儲數據*/
        window.localStorage.setItem("userName",name);
    };
    /*獲取數據*/
    document.querySelector("#getData").onclick=function(){
        var name=window.localStorage.getItem("userName");
        alert(name);
    };
    /*清除數據*/
    document.querySelector("#removeData").onclick=function(){
        window.localStorage.removeItem("userName");
    };
</script>
</body>
</html>

3、自定義播放器

咱們知道不一樣的瀏覽器的音頻視頻的播放器控件顯示樣式有差別，那麼咱們怎麼作一個在任何瀏覽器下都有相一樣式的播放器呢？

經常使用方法：

load() 加載，
play()播放，
pause() 暫停。

注意：jQuery中沒有提供對視頻播放控件的方式，因此若是使用jQuery操做元素，必須將其轉爲原生 js 的方式來調用這些方法。

經常使用屬性：

currentTime：視頻播放的當前進度
duration：視頻的總時長
paused：視頻播放的狀態

經常使用事件：

oncanplay：事件在用戶能夠開始播放視頻/音頻時出觸發
ontimeupdate：經過該事件報告當前的播放進度
onended：播放完時觸發

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./css.css">
</head>
<body>
<h3 class="playerTitle">自定義視頻播放器</h3>
<div class="player">
    <video src="../mp4/2.mp4"></video>
    <div class="controls">
        <a href="javascript:void(0);" class="switch fa fa-play"></a>
        <a href="javascript:void(0);" class="expand fa fa-arrows-alt"></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>
<script src="./jquery.min.js"></script>

<script>
    $(function () {
        // 獲取播放器文件
        var video = $("video")[0];

        // 點擊播放按鈕播放視頻文件
        $(".switch").click(function () {
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
            $(this).toggleClass("fa-play fa-pause");
        });

        // 全屏操做
        $(".expand").click(function () {
            if (video.requestFullscreen) {
                video.requestFullscreen();
            }
            else if (video.webkitRequestFullScreen) {
                video.webkitRequestFullScreen();
            }
            else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen();
            }
            else if (video.msRequestFullScreen) {
                video.msRequestFullScreen();
            }
        });

        function getTime(total) {
            var hour = Math.floor(total / 3600);
            hour = hour > 10 ? hour : "0" + hour;
            var min = Math.floor((total % 3600) / 60);
            min = min > 10 ? min : "0" + min;
            var sec = Math.floor((total % 3600) % 60);
            sec = sec > 10 ? sec : "0" + sec;
            return hour + ":" + min + ":" + sec;
        }

        // 當視頻加載完成後顯示視頻
        video.oncanplay = function () {
            this.style.display = "block";
            // 根據視頻總時長，獲取時分秒
            var total = getTime(this.duration);
            // 顯示總時長
            $(".totalTime").html(total);
        };

        // 視頻播放過程當中，獲取時分秒實時顯示
        // 若是修改currentTime值也會觸發這個事件，也就是隻要currentTime值變化，就會觸發這個事件
        video.ontimeupdate = function () {
            var current = getTime(this.currentTime);
            $(".currentTime").html(current);
            // 設置進度條
            var percent = this.currentTime / this.duration * 100 + "%";
            $(".elapse").css("width", percent);
        };

        // 點擊進度條跳播
        $(".bar").click(function (e) {
            video.currentTime = e.offsetX / $(this).width() * video.duration;
        });

        // 播放完成後回到最初位置
        video.onended = function () {
            // 位置清零
            video.currentTime = 0;
            // 播放暫停狀態爲播放
            $(".switch").removeClass("fa fa-pause").addClass("fa fa-play");
        };
    });

</script>

</body>
</html>