當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

Html5新增视频功能——video API 事件

發布時間：2023/12/13 综合教程 21 生活家

生活随笔收集整理的這篇文章主要介紹了 Html5新增视频功能——video API 事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

video API事件

play() 可以控制視頻自動播放

但是在chrome瀏覽器中不允許自動播放，只有在設置靜音時才能允許自動播放

理由是：視頻自動播放在終端非常耗電，因此被禁止

不過chrome瀏覽器允許自動播放7s以內的視頻，然而很少有人會放7s以內的視頻，而是直接用gif

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
</head>
<body>
    <video src="data/imooc.mp4" controls id="myVideo"></video>

    <script>
        var myVideo=document.getElementById("myVideo");
        myVideo.play();

        //在谷歌瀏覽器中無法自動播放，除非添加了事件
        window.onclick=function(){
            myVideo.play();
        }
    </script>
</body>
</html>

pause() 視頻暫停

    <video src="data/imooc.mp4" controls id="myVideo"></video>
    <div id="playNode">播放</div>
    <div id="pauseNode">暫停</div>

    <script>
        var myVideo=document.getElementById("myVideo");
        
        //點擊控制播放與暫停
        //id可以直接使用，不用DOM獲取
        playNode.onclick=function(){
            myVideo.play();
        }
        pauseNode.onclick=function(){
            myVideo.pause();
        }

        //5秒后視頻自動暫停
        setTimeout(function(){
            myVideo.pause();
        },5000);
    </script>

duration 視頻總長度

在剛加載時無法顯示，結果是NaN

可以使用定時器解決，或者等到時視頻播放結束

    <video src="data/imooc.mp4" controls id="myVideo"></video>
    <div id="playNode">播放</div>
    <div id="pauseNode">暫停</div>

    <script>
        var myVideo=document.getElementById("myVideo");
        
        console.log(myVideo.duration);//NaN

        setTimeout(function(){
            console.log(myVideo.duration);//206.485333

            var min=parseInt(myVideo.duration/60);//分
            var sec=parseInt(myVideo.duration%60);//秒
            console.log("總時長"+min+":"+sec);//總時長3:26

        },200);


    </script>

currentTime 設置或返回視頻的當前時間

    <video src="data/imooc.mp4" controls id="myVideo"></video>
    <div id="playNode">播放</div>
    <div id="pauseNode">暫停</div>
    <div id="gogogo">快進</div>

    <script>
        var myVideo=document.getElementById("myVideo");
        
        //每一秒獲取當前視頻的播放時間
        setInterval(function(){
            console.log(myVideo.currentTime);
        },1000);

        //設置視頻的當前位置是30秒處
        myVideo.currentTime=30;
        
        //點擊快進，視頻跳到20秒之后
        gogogo.onclick=function(){
            myVideo.currentTime+=30;
        }

    </script>

src 設置視頻的src屬性（也可用于替換）

    <video controls id="myVideo"></video>

    <script>
        myVideo.src="data/imooc.mp4";
    </script>

volume 獲取和設置視頻音量

配合range使用效果很不錯哦

    <video controls id="myVideo"></video>
    <input type="range" name="myvolumn" id="myvolumn" min=0 max=100 value="50">

    <script>
        myVideo.src="data/imooc.mp4";

        //獲取視頻默認音量（1代表最高）
        console.log(myVideo.volume);//1

        //設置視頻音量，0代表靜音
        myVideo.volume=0;

        //使用range來控制音量
        myvolumn.oninput=function(){
            myVideo.volume=myvolumn.value/100;
        }
    </script>

controls 設置視頻的控件

    <video id="myVideo"></video>

    <script>
        myVideo.src="data/imooc.mp4";

        //設置視頻控件
        myVideo.controls=true;

    </script>

muted 設置視頻靜音，但這個muted不會出現在video標簽上

    <video id="myVideo" src="data/imooc.mp4" controls></video>

    <script>
        //設置視頻靜音
        myVideo.muted=true;

    </script>

networkState 視頻的網絡狀態

0 未初始化

1 視頻已經獲取到資源，未使用網絡

2 視頻正在加載（常見于網絡視頻），邊下載邊看

3 未找到視頻資源（常見src屬性錯誤，或者剛初始化時，因為video不會立刻找到資源，存在延遲）

    <video id="myVideo" src="data/imooc.mp4" controls></video>

    <script>
        //獲取視頻的網路狀態
        console.log(myVideo.networkState);//3

        setTimeout(function(){
            console.log(myVideo.networkState);//1
        },200);

    </script>

video API 事件2

currentSrc 返回當前音視頻的地址

currentSrc和src的區別：

src 可以設置音視頻地址

currentSrc 不能設置音視頻地址，只能獲取（而且必須等到視頻資源已經加載完可以使用的時候才能獲取到）

    <video id="myVideo" src="data/imooc.mp4" controls></video>

    <script>
        
        console.log(myVideo.src);//file:///C:/Users/96579/Desktop/video/data/imooc.mp4
        console.log(myVideo.currentSrc);//空

        setTimeout(function(){
            console.log(myVideo.src);//file:///C:/Users/96579/Desktop/video/data/imooc.mp4
            console.log(myVideo.currentSrc);//file:///C:/Users/96579/Desktop/video/data/imooc.mp4
        },200);

    </script>

ended 返回視頻是否已經播放結束

    <video id="myVideo" src="data/imooc.mp4" controls></video>

    <script>
        //判斷視頻是否播放結束
        console.log(myVideo.ended);//false
    
        //監聽視頻播放結束事件
        myVideo.addEventListener("ended",function(){
            console.log("視頻播放結束");

            //此時可以起到循環播放的作用
            myVideo.play();
        })

    </script>

loop 設置或返回視頻的循環播放

    <video id="myVideo" src="data/imooc.mp4" controls></video>
    <div id="myloop">不循環</div>

    <script>
        //判斷視頻是否設置了循環播放
        console.log(myVideo.loop);//false
    
        //設置視頻循環播放
        myVideo.loop=true;

        //控制視頻的循環與否
        myloop.onclick=function(){
            if(myVideo.loop==false){
                this.innerHTML="循環";
                myVideo.loop=true;
            }else{
                this.innerHTML="不循環";
                myVideo.loop=false;
            }
        }

    </script>

playbackRate 設置或獲取視頻的播放速度

    <video id="myVideo" src="data/imooc.mp4" controls></video>
    <div id="rate">
        <span>0.5</span>
        <span>1</span>
        <span>2</span>
    </div>

    <script>
        //查看視頻的默認播放速度
        console.log(myVideo.playbackRate);//1
    
        //設置視頻播放速度
        myVideo.playbackRate=1.5;

        //控制視頻的播放速度
        rate.children[0].onclick=function(){
            myVideo.playbackRate=0.5;
        }
        rate.children[1].onclick=function(){
            myVideo.playbackRate=1;
        }
        rate.children[2].onclick=function(){
            myVideo.playbackRate=2;
        }

    </script>

readyState 視頻的當前就緒狀態

0 沒有獲取到信息

1 有數據，但是快不足以支撐

2 當前數據可用，但是下一幀不可用

3 數據正在緩沖，但當前及下一幀是可用的

4 視頻已經準備就緒，數據足以播放

    <video id="myVideo" src="data/imooc.mp4" controls></video>

    <script>
        //沒有獲取到信息
        console.log(myVideo.readyState);//0
    
        //視頻準備就緒
        setTimeout(function(){
            console.log(myVideo.readyState);//4
        },200);

    </script>

timeupdate 視頻播放位置在改變

    <video id="myVideo" src="data/imooc.mp4" controls></video>
    <p id="timeNode"></p>
    <p id="timeNode2"></p>

    <script>
        //監聽視頻播放狀態
        myVideo.addEventListener("timeupdate",function(){
            console.log("視頻正在播放中");

            timeNode.innerHTML=myVideo.currentTime+"/"+myVideo.duration;

            //let聲明變量，相當于var，是es6語法
            let now=parseInt(myVideo.currentTime/60)+":"+parseInt(myVideo.currentTime%60);
            let all=parseInt(myVideo.duration/60)+":"+parseInt(myVideo.duration%60);
            timeNode2.innerHTML=now+"/"+all;
        })

    </script>

這里有個小bug，就是秒數是個位數時，前面少了0，這個后面再處理

seeked 視頻已經跳轉到新的時間位置

seeking 視頻正在跳轉到新的時間位置

監聽時需要加on onseeked onseeking

    <video id="myVideo" src="data/imooc.mp4" controls></video>

    <script>
        //監聽視頻跳轉狀態
        myVideo.onseeked=function(){
            console.log("跳轉完成");
        }
        myVideo.onseeking=function(){
            console.log("正在跳轉");
        }

    </script>

volumechange 音量改變事件

使用時需要加上on

    <video id="myVideo" src="data/imooc.mp4" controls></video>
    <p id="myvolume">音量改變</p>

    <script>
        //監聽音量改變事件
        myVideo.onvolumechange=function(){
            console.log("音量改變");
        }

        //點擊隨機改變音量
        myvolume.onclick=function(){
            myVideo.volume=Math.random();
        }

    </script>

video API 事件3

requestFullscreen 全屏

首先必須是在事件中觸發才能使用

其次不同瀏覽器有不同的寫法

chrome: webkitRequestFullscreen

火狐：mozRequestFullScreen

IE：ms

退出全屏沒有設置，默認會使用自帶的控件（因為即使沒有control控件，在全屏狀態下默認也會出現控件）

    <video id="myVideo" src="data/imooc.mp4" controls></video>
    <p id="fullScreen">全屏</p>

    <script>
        //設置全屏
        fullScreen.onclick=function(){
            if(myVideo.webkitRequestFullscreen){
                myVideo.webkitRequestFullscreen();
            }else if(myVideo.mozRequestFullScreen){
                myVideo.mozRequestFullScreen();
            }else{
                //其他瀏覽器待補充……
            }
        }

    </script>

load 重新加載視頻資源

注意只是重新加載視頻資源，整個頁面并不會刷新

通常用于改變視頻的src之后的操作

    <video id="myVideo" src="data/imooc.mp4" controls></video>
    <p id="load">視頻刷新</p>

    <script>
        //設置全屏
        load.onclick=function(){
            myVideo.load();
        }

    </script>

canplay 視頻已經準備好，可以開始播放

    <video id="myVideo" src="data/imooc.mp4" controls></video>

    <script>
        myVideo.addEventListener("canplay",function(){
            console.log("視頻已經加載好，可以開始播放了");
        })

    </script>

總結

以上是生活随笔為你收集整理的Html5新增视频功能——video API 事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：申请免费通配符证书(Let's
下一篇： Android 4.2 通知通过Pend