video事件

/*
* video播放器
*/

* @ src: 指定所要嵌入視頻、文檔的URL。
* @ poster: 視頻預覽圖像
* @ autoplay: 視頻自動播放
* @ loop: 循環播放
* @ muted: 是否靜音
* @ controls: 視頻控件
* @ preload: 用於指定是否提早下載，怎樣提早下載視頻數據，給用戶代理相應的提示。autoplay：preload屬性將無效
* @ 1. auto：儘量提早下載視頻
* @ 2.metadata：只下載視頻的meta信息部分。Meta信息中收集了關於視頻的長度、視頻的起始禎的圖像、視頻的長度等信息 

　　

/*
* video事件
*/

* @ canPlayType: 檢查是否支持HTML5 video元素而且執行全部其餘代碼, 若是不支持視頻, 返回false並顯示一條消息
* @ canplay: 通知什麼時候視頻加載內容已足夠用於開始播放
* @ loadedmetadata: 獲取視頻的長度, 纔有duration屬性
* @ timeupdate: 獲取視頻中的當前位置, 當currentTime屬性發生更改時, 引起ontimeupdate事件,在事件處理程序中，從視頻對象中檢索 currentTime的值並進行顯示。currentTime 屬性是浮點型變量，該變量能夠從 12 位中獲取小數位置。可是，出於性能方面的考慮，在 Windows Internet Explorer中一秒內僅引起該事件四次。若要在示例中顯示，則須要使用 "toFixed()" 方法將 currentTime 取捨爲一位。運行視頻時，會更新和顯示當前時間。
* @ playing: 點擊視頻播放
* @ pause: 點擊視頻暫停
* @ volumechange: 視頻靜音設置

 

/*

* video屬性
*/

* @ play: 視頻的播放
* @ pause: 視頻的暫停
* @ paused: 檢查video是否在暫停
* @ volume: 獲取或設置音量
* @ duration: 獲取視頻總時間
* @ currentTime: 獲取當前播放時間
* @ playbackRate屬性: 視頻播放速度

HTMl <embed>

<embed src="http://gz.chimelong.com/happy/images/banner/happy08.mp4" autostart="false" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" width="300" height="200"/>

hidden設置播放面板的顯示和隱藏，hidden有兩個值：true(隱藏)和no(顯示)； 

autostart設置多媒體內容的播放方式， autostart 有兩個值：true（自動播放）和no（不自動播放）；

loop設定是否循環播放， loop有兩個值：true（無限次循環播放）no（僅播放一次）。

starttime開始時間，值爲"mm:ss" ,表示多久後開始播放。

volume調節音量:, 屬性規定音頻或視頻文件的音量大小。值在0~100之間的整數。
 

 

HTML5: video事件

    <video id="thevideo" autoplay width="300" height="200" poster="/images/video.png">
        <source src="http://gz.chimelong.com/happy/images/banner/happy08.mp4" type="video/mp4" >
        <!-- IE低版本 -->
        <object>
            <embed src="http://gz.chimelong.com/happy/images/banner/happy08.mp4" type= "application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" width="300" height="200"/>
        </object>
    </video>
    <div id="wrap">
        <button id="play" title="play">播放</button>
        <button id="restart" title="restart">重播一次</button>
        <button id="rew" title="rew">快退</button>
        <button id="forward" title="forward">前進</button>
        <button id="slower" title="slower">慢速</button>
        <button id="mormal" title="mormal">常速</button>
        <button id="faster" title="faster">快速</button>
        <button id="volumeUp" title="volumeUp">音量+</button>
        <button id="volumeDown" title="volumeDown">音量-</button>
        <button id="mute" title="mute">靜音</button>
        <div id="vLength"></div>
        <div id="curTime"></div>
        <div id="vRemaining"></div>
        <div id="mutetext"></div>
        <div id="errorMsg"></div>
        <!-- <img src="/images/3.png" id="rotateVideo" alt=""> -->
    </div>
    <div title="Event status area" >
        <label>oncanplaythrough: </label><span class="stats" id="cpt"></span><br />
        <label>onloadstart: </label><span class="stats"  id="ls"></span><br />
        <label>onprogress: </label><span class="stats"  id="pg"></span><br />
        <label>onloadeddata: </label><span class="stats" id="ld"></span><br />
        <label>onended: </label><span class="stats" id="ndd"></span><br />
        <label>onemptied: </label><span class="stats" id="mt"></span><br />
        <label>onstalled: </label><span class="stats" id="stall"></span><br />
        <label>onwaiting: </label><span class="stats" id="waiting"></span><br />
        <label>ondurationchange: </label><span class="stats" id="dc"></span><br />    
    </div>

(function(){
    var video = document.getElementById("thevideo");
    var vLength;
    var pgFlag = "";        //used for progress tracking

    if(video.canPlayType){  //tests that we have HTML5 video support
        //video button helper functions;
        //play video
        function vidplay(evt){
            if(video.paused){
                video.play();
                document.getElementById("play").innerHTML = "暫停";
            }else{
                video.pause();
                document.getElementById("play").innerHTML = "播放"
            }
        }
        video.addEventListener("canplay",function(){
            document.getElementById("wrap").style.display = "block";
            video.controls = true;
        },false)

        //button helper functions
        //skip,forward,backwrap,or restart
        function  setTime(tValue){
            //if no video is loaded,this throws an exception
            try{
                if(tValue == 0){
                    video.currentTime = tValue;
                    video.play();   //若是是暫停後再按重放鍵會重置到開始是暫停狀態,因此要開啓
                }else{
                    video.currentTime += tValue;
                }
            }catch(err){
                errMessage("Video content might not be loaded");
            }
        }

        //change volume based on incoming value
        function setVol(value){
            var vol = video.volume;
            vol = (vol + value).toFixed(1);
            //test for range 0 - 1 to avoid exceptions
            if(vol >= 0 && vol <= 1){
                video.volume = vol;
            }else{
                video.volume = (vol < 0) ? 0 : 1;
            }
        }

        //點擊視頻內容播放暫停
        var borwser = (function(){
            var s = navigator.userAgent.toLowerCase();
            var match = /(webkit)[ \/]([\w.]+)/.exec(s)||/(opera)(?:.*version)?[ \/]([\w.]+)/.exec(s)||(!!window.ActiveXObject || "ActiveXObject" in window) && /(msie\s|rv:)([\w.]+)/.exec(s)||!/compatible/.test(s) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(s) ||[];
            return {name : match[1] || "",version : match[2] || "0"};
        })();
        if(borwser.name !== "mozilla"){
            video.addEventListener("click",vidplay,false);
            console.log("非火狐瀏覽器")
        }else{
            console.log("火狐瀏覽器")
        }

        //chrome和opera雙擊全屏
        if(borwser.name === "webkit"){
            //chrome的雙擊視頻畫面全屏
            var count = 0;
            video.addEventListener("dblclick",function(){
                if(count % 2 == 0){
                    video.webkitRequestFullScreen();
                }else{
                    // video.exitFullscreen();
                    document.webkitCancelFullScreen();
                    console.log("退出全屏")
                }
                count++;
            },false);
        }

        //play
        document.getElementById("play").addEventListener("click",vidplay,false);

        //restart
        document.getElementById("restart").addEventListener("click",function(){
            setTime(0);
        },false);

        //Skip backwrad 10 seconds
        document.getElementById("rew").addEventListener("click",function(){
            setTime(-10);
        },false);

        //Skip forward 10 seconds
        document.getElementById("forward").addEventListener("click",function(){
            setTime(10);
        },false);

        //volume buttons
        document.getElementById("volumeDown").addEventListener("click",function(){
            setVol(-.1);        //down by 10%;
        },false);
        document.getElementById("volumeUp").addEventListener("click",function(){
            setVol(.1);        //up by 10%;
        },false);

        //playback speed buttons
        document.getElementById("slower").addEventListener("click",function(){
            video.playbackRate -= .25;
        },false);

        document.getElementById("faster").addEventListener("click",function(){
            video.playbackRate += .25;
        },false);

        document.getElementById("mormal").addEventListener("click",function(){
            video.playbackRate = 1;
        },false);

        //mute
        document.getElementById("mute").addEventListener("click",function(){
            if(video.muted){
                video.muted = false;
            }else{
                video.muted = true;
            }
        },false);

        //paused and playing events to control buttons
        video.addEventListener("pause",function(){
            document.getElementById("play").innerHTML = "播放";
        },false);

        video.addEventListener("playing",function(){
            document.getElementById("play").innerHTML = "暫停";
        },false);

        //display video duration when availbale
        video.addEventListener("loadedmetadata",function(){
            vLength = video.duration.toFixed(1);
            document.getElementById("vLength").innerHTML = "視頻時間長度:" + vLength + "秒";
        },false)

        //display the current and remaining times
        video.addEventListener("timeupdate",function(){
            var vTime = video.currentTime;
            document.getElementById("curTime").innerHTML = "當前播放時間:" + vTime.toFixed(1) + "秒";
            document.getElementById("vRemaining").innerHTML = "當前播放時間:" + (vLength - vTime).toFixed(1) + "秒";
        },false);

        //onvolumechange controls mute
        video.addEventListener("volumechange",function(){
            if(video.muted){
                document.getElementById("mutetext").innerHTML = "聲音:靜音";
            }else{
                document.getElementById("mutetext").innerHTML = "音量:" +　video.volume;
            }
        },false);

        //any video error will fail with message
        video.addEventListener("error",function(err){
            errMessage(err);
        },false);

        //Download and playback status events
        //頁面加載時出現
        video.addEventListener("loadstart",function(){
            document.getElementById("ls").innerHTML = "Stared";
        },false);

        //視頻加載完後纔出現
        video.addEventListener("loadeddata",function(){
            document.getElementById("ld").innerHTML = "Data was loaded";
        },false);

        //視頻播放結束後觸發
        video.addEventListener("ended",function(){
            document.getElementById("ndd").innerHTML = "Playback ended;";
        },false);

        //重置爲初始狀態下觸發
        video.addEventListener("emptied",function(){
            document.getElementById("mt").innerHTML = "Video reset";
        },false);

        //在下載被中斷三秒以上時引起.網絡差時觸發
        video.addEventListener("stalled",function(){
            document.getElementById("stall").innerHTML = "Download was stalled";
        },false);

        //播放下一幀不可用時觸發(斷網或者緩衝狀況下)
        video.addEventListener("waiting",function(){
            document.getElementById("waiting").innerHTML = "Player waited for content";
        },false);

        //指示正在下載媒體內容,下載完後中止
        video.addEventListener("progress",function(){
            pgFlag += ".";
            if(pgFlag.length > 10){
                pgFlag = ".";
            }
            document.getElementById("pg").innerHTML = pgFlag;
        },false);

        //在onloadstart以後和onloadedmetadata(肯定時間)以前主當即引起
        video.addEventListener("durationchange", function () {
            document.getElementById("dc").textContent = "Duration has changed";
        }, false);

        //在不須要進一步緩衝就能夠播放直至文件結束時引起
        video.addEventListener("canplaythrough", function () {
            document.getElementById("cpt").textContent = "Ready to play whole video";
        }, false);



        function errMessage(msg){
            //display an error message for 5 seconds then clears it;
            document.getElementById("errorMsg").innerHTML = msg;
            setTimeout(function(){
                document.getElementById("errorMsg").innerHTML = "";
            },5000);
        }
    }else{
        errMessage("HTML5 Video is required for this example");
    }
}())