video、audio屬性及事件的使用

因為video和audio屬性大致相同，直接合并在一起。

另外簡單記錄一下H5所包含的新特性。

HTML5 中的一些有趣的新特性：

  • 用于繪畫的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素(video支持MP4，WebM 和 Ogg三種格式；audio支持MP3，Ogg和Wav; 瀏覽器兼容上不支持 IE8及以下版本瀏覽器)
  • 對本地離線存儲的更好的支持
  • 新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
  • 新的表單控件，比如 calendar、date、time、email、url、search

1、屬性

  • controls="nodownload" 不支持下載
  • controls="nofullscreen" 不支持全屏
  • autoplay 視頻打開后自動播放
  • loop 視頻結(jié)束后循環(huán)播放
  • preload 視頻打開后進入預(yù)加載模式,不自動播放.若同時設(shè)置了autoplay屬性，則該屬性會被忽略
  • muted 設(shè)定默認(rèn)靜音播放，可手動開啟
  • poster 貼圖, 即打開視頻后會在視頻顯示框內(nèi)以此圖片作為封面
  • currentSrc 獲取當(dāng)前音視頻的資源路徑
  • currentTime 獲取當(dāng)前音視頻播放的時間（即當(dāng)前播放到的時間位置）
  • duration 獲取當(dāng)前音視頻的時間長度
  • volume 獲取當(dāng)前音視頻的音量
  • height，width 獲取當(dāng)前音視頻的寬高尺寸
  • 備用地址切換（如下代碼塊），寫入多個 source后會從第一個source進行加載，若第一個source加載失敗則會自動進行切換
<video controls autoplay width="400" height="300" id="_source">
    <source src="test3.mp4" type="video/mp4" />
    <source src="test9.mp4" type="video/mp4" />
    <source src="test-2.mp4" type="video/mp4" />
  </video>
  <script>

分界線表明上方內(nèi)容屬于標(biāo)簽屬性，同時適用于進行標(biāo)簽上賦值使用及進行dom操作，中間內(nèi)容適用于dom操作，下方則是代碼編寫的方式，具體一些使用在下方的學(xué)習(xí)所寫的Demo源碼中寫到

2、事件

video 和 audio 的事件基本一致，其實根據(jù)以往學(xué)習(xí)的內(nèi)容，其事件有點類似于一個視頻的生命周期，它擁有各個不同時間點的觸發(fā)事件以及出現(xiàn)各種情況的觸發(fā)事件，通過addEventListener的方式進行監(jiān)聽，即可在該事件出發(fā)時做出相應(yīng)的處理。詳細(xì)用法我也放在下面的源碼里面了，會有相應(yīng)注釋進行解釋。

3、Demo源碼

首先源碼沒有引用jquery，另外呢靜態(tài)資源是根據(jù)自己需要可進行替換的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>

        <header>
            <h1>這是HEADER</h1>
        </header>
        <section>這是SECTION</section>
        <nav>這是NAV</nav>

        <article>這是ARTICLE,下面是視頻組件學(xué)習(xí)</article>
        <div id="videoOper">
            <button type="button" onclick="selectSRC(1)">視頻一</button>
            <button type="button" onclick="selectSRC(2)">視頻二</button>
        </div>
        <div id="video_demo">
            <video id="video1" width="800" height="500" controls="controls" preload="auto" controlslist="nodownload nofullscreen"
             style="background-color: darkblue;">
                <source src="./Material/videoDemo.mp4" type="video/mp4">
                Your browser does not support the video tag.
                </source>
            </video>
            <img id="adver" src="Material/adv.png">
        </div>
        <div id="videoOper">
            <button type="button" onclick="makeBig()">放大</button>
            <button type="button" onclick="makeSmall()">縮小</button>
            <button type="button" onclick="getTime()">記錄時間</button>
            <button type="button" onclick="getSrc()">資源路徑</button>
            <button type="button" onclick="makeFront()">快進5s</button>
            <button type="button" onclick="makeBack()">快退5s</button>
        </div>

        <div id="data">
            <table border="0" cellspacing="10" style="border-collapse: collapse; margin: 1rem auto;">

                <tr>
                    <td>時間顯示</td>
                    <td>
                        <input type="text" id="TIMERECORDS" value="" />
                    </td>
                </tr>
                <tr>
                    <td>路徑顯示</td>
                    <td>
                        <input type="text" id="SRCRECORDS" value="" />
                    </td>
                </tr>
            </table>
        </div>

        <footer>
            <h1>這是FOOTER</h1>
        </footer>

        <script type="text/javascript">
            var _self = this;
            var videoDOM = document.getElementById("video1")
            var imgDOM = document.getElementById("adver")
            var timeDOM = document.getElementById("TIMERECORDS");
            var srcDOM = document.getElementById("SRCRECORDS");

            // 放大
            function makeBig() {
                console.log("makeBig");
                let initwidth = videoDOM.width;
                let initheith = videoDOM.height;
                if (initwidth == 1000) {
                    alert("尺寸過大")
                } else {
                    videoDOM.width = initwidth + 200;
                    videoDOM.height = initheith + 100;
                    _self.caculate();
                }
            }

            // 縮小
            function makeSmall() {
                console.log("makeSmall");
                let initwidth = videoDOM.width;
                let initheith = videoDOM.height;
                console.log(initwidth)
                console.log(initheith)
                if (initwidth == 400) {
                    alert("尺寸過小")
                } else {
                    videoDOM.width = initwidth - 200;
                    videoDOM.height = initheith - 100;
                    _self.caculate();
                }
            }

            // 獲取當(dāng)前播放時間
            function getTime() {
                let timeValue = videoDOM.currentTime;
                timeDOM.value = timeValue + "s";
            }

            // 獲取當(dāng)前視頻SRC
            function getSrc() {
                let srcValue = videoDOM.currentSrc;
                srcDOM.value = srcValue;
            }

            // 快進
            function makeFront() {
                let timeValue = videoDOM.currentTime;
                if (videoDOM.duration - timeValue < 5) {
                    alert("視頻剩余時長不足5s")
                } else {
                    videoDOM.currentTime = timeValue + 5;
                }
            }

            // 快退
            function makeBack() {
                let timeValue = videoDOM.currentTime;
                if (timeValue - 5 < 0) {
                    videoDOM.currentTime = 0;
                } else {
                    videoDOM.currentTime = timeValue - 5;
                }
            }

            // 切換視頻
            function selectSRC(params) {
                if (params == 1) {
                    videoDOM.src = "http://127.0.0.1:8848/H5_CSS3_JS/Material/videoDemo.mp4";
                } else {
                    videoDOM.src = "http://127.0.0.1:8848/H5_CSS3_JS/Material/videoDemo2.mp4";
                }
            }

            // 計算廣告圖大小及位置，以保持居中
            function caculate() {
                let imgWidth = videoDOM.width / 2;
                let imgHeight = videoDOM.height / 2;
                console.log(imgWidth)
                console.log(imgHeight)
                imgDOM.style.width = imgWidth + "px";
                imgDOM.style.height = imgHeight + "px";
                imgDOM.style.top = imgHeight - imgHeight / 2 + "px";
            }


            // 以下是video的事件，有點類似于生命周期

            // 1、loadstart: 視頻查找。瀏覽器開始尋找指定音/視頻時，即加載過程開始時
            videoDOM.addEventListener('loadstart', function(e) {
                console.log("視頻元數(shù)據(jù)開始加載！");
                console.log(e);
                _self.caculate();
                console.log("此時還沒有視頻時長--->", videoDOM.duration)
            })

            // 2、durationchange: 時長變化。即指定音/視頻的時長數(shù)據(jù)改變，變化為音/視頻的實際時長
            videoDOM.addEventListener('durationchange', function(e) {
                console.log("視頻時長已刷新");
                console.log(e);
                console.log("刷新后的視頻時長--->", videoDOM.duration);

                // 3、loadedmetadata: 元數(shù)據(jù)已加載，
                videoDOM.addEventListener('loadedmetadata')
                console.log('視頻的元數(shù)據(jù)已加載');
                console.log(e);
            })

            // 4、loadeddata: 視頻下載監(jiān)聽。當(dāng)前幀的數(shù)據(jù)已加載，但是沒有足夠數(shù)據(jù)播放下一幀時觸發(fā)
            videoDOM.addEventListener('loadeddata', function(e) {
                console.log("當(dāng)前幀數(shù)據(jù)可用");
                console.log(e);
            })

            // 5、progress: 瀏覽器下載監(jiān)聽。瀏覽器正在下載音/視頻時觸發(fā)
            videoDOM.addEventListener('progress', function(e) {
                console.log("視頻正在下載中");
                console.log(e);
            })

            // 6、canplay: 可播放監(jiān)聽。瀏覽器預(yù)計能夠播放指定的音/視頻時觸發(fā)
            videoDOM.addEventListener('canplay', function(e) {
                console.log("當(dāng)前視頻可進行播放");
                console.log(e);
            })

            // 7、canplaythrough: 可流暢播放。瀏覽器預(yù)計能夠在不停下來進行緩沖的情況下持續(xù)播放指定的音頻/視頻時觸發(fā)
            videoDOM.addEventListener('canplaythrough', function(e) {
                console.log("當(dāng)前視頻可流暢播放");
                console.log(e);
            })

            // 8、play: 播放監(jiān)聽。
            videoDOM.addEventListener('play', function(e) {
                console.log("當(dāng)前視頻正在播放中");
                console.log(e);
                imgDOM.style.display = "none";
            })

            // 9、pause: 暫停監(jiān)聽。
            videoDOM.addEventListener('pause', function(e) {
                console.log("當(dāng)前視頻已暫停");
                console.log(e);
                _self.caculate();
            })

            // 10、seeking: 查找開始。當(dāng)用戶開始移動/跳躍到音/視頻中新的位置時觸發(fā)
            videoDOM, addEventListener('seeking', function(e) {
                alert("移動了進度條");
                console.log(e);
            })

            // 11、seeked: 查找結(jié)束。當(dāng)用戶已經(jīng)移動到新位置時觸發(fā)
            videoDOM.addBehavior('seeked', function(e) {
                console.log("進度條移動到新位置了");
                console.log(e);
            })

            // 12、waiting: 視頻加載等待。當(dāng)視頻由于需要緩沖下一幀而停止、等待時觸發(fā)
            videoDOM.addEventListener('waiting', function(e) {
                console.log("視頻正在加載、等待");
                console.log(e);
            })

            // 13、playing: 當(dāng)視頻因緩沖而暫停或停止后已就緒時觸發(fā)
            videoDOM.addEventListener('playing', function(e) {
                console.log("正在進行視頻緩沖");
                console.log(e);
            })

            // 14、timeupdate: 目前播放位置已更改時，播放時間更新
            videoDOM.addEventListener('timeupdate', function(e) {
                console.log('播放位置變更，時間已更改');
                console.log(e);
                console.log("當(dāng)前時間節(jié)點為", videoDOM.currentTime);
            })

            // 15、ended: 播放結(jié)束
            videoDOM.addEventListener('ended', function(e) {
                console.log("視頻播放已結(jié)束");
                console.log(e);
            })

            // 16、error: 播放錯誤
            videoDOM.addEventListener('error', function(e) {
                console.log("視頻出錯了");
                console.log(e);
            })

            // 17、volumechange: 當(dāng)音量變更時
            videoDOM.addEventListener('volumechange', function(e) {
                console.log("音量變更了");
                console.log(e);
            })

            // 18、stalled: 當(dāng)瀏覽器嘗試獲取媒體數(shù)據(jù)，但數(shù)據(jù)不可用時吃法
            videoDOM.addEventListener('stalled', function(e) {
                console.log("媒體數(shù)據(jù)不可用");
                console.log(e);
            })

            // 19、ratechange: 當(dāng)視頻播放速度收到更改時
            videoDOM.addEventListener('ratechange', function(e) {
                console.log("視頻播放速度已更改");
                console.log(e);
            })
        </script>
    </body>
</html>



<style type="text/css">
    header,
    section,
    nav,
    article,
    footer {
        text-align: center;
    }

    article {
        margin: 30px 0 10px 0;
        font-size: 1.25rem;
        font-weight: bold;
        color: mediumblue;
    }

    #video_demo {
        position: relative;
    }

    #video_demo,
    #videoOper {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #videoOper {
        margin: 0.625rem 0;
    }

    #adver {
        position: absolute;
    }
</style>
效果截圖
簡單的學(xué)習(xí)效果.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容