/*
* 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 trackingif(video.canPlayType){ //tests that we have HTML5 video support//video button helper functions;//play videofunction 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 restartfunction setTime(tValue){//if no video is loaded,this throws an exceptiontry{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 valuefunction setVol(value){var vol = video.volume;vol = (vol + value).toFixed(1);//test for range 0 - 1 to avoid exceptionsif(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);}//playdocument.getElementById("play").addEventListener("click",vidplay,false);//restartdocument.getElementById("restart").addEventListener("click",function(){setTime(0);},false);//Skip backwrad 10 secondsdocument.getElementById("rew").addEventListener("click",function(){setTime(-10);},false);//Skip forward 10 secondsdocument.getElementById("forward").addEventListener("click",function(){setTime(10);},false);//volume buttonsdocument.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 buttonsdocument.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);//mutedocument.getElementById("mute").addEventListener("click",function(){if(video.muted){video.muted = false;}else{video.muted = true;}},false);//paused and playing events to control buttonsvideo.addEventListener("pause",function(){document.getElementById("play").innerHTML = "播放";},false);video.addEventListener("playing",function(){document.getElementById("play").innerHTML = "暫停";},false);//display video duration when availbalevideo.addEventListener("loadedmetadata",function(){vLength = video.duration.toFixed(1);document.getElementById("vLength").innerHTML = "視頻時間長度:" + vLength + "秒";},false)//display the current and remaining timesvideo.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 mutevideo.addEventListener("volumechange",function(){if(video.muted){document.getElementById("mutetext").innerHTML = "聲音:靜音";}else{document.getElementById("mutetext").innerHTML = "音量:" +　video.volume;}},false);//any video error will fail with messagevideo.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");} }())

?

轉載于:https://www.cnblogs.com/alantao/p/6056877.html

總結

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

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