我準備了三個東西,一個為純色p背景,一個為影片的第一幀截圖,一個為一段影片。
我想的是,若影片無法載入成功,就用截圖代替,若截圖也無法載入成功就用純色p來代替。
請教一下,如何實現這個功能,或者說如何抓取影片和截圖載入的完成情況狀態?
本人小白,煩請大神指教~(最好能上點兒生動的代碼,謝謝各位了)
闭关修行中......
這種東西在網上一搜一大把啊http://www.webhek.com/post/vi...比如上面的這個有代碼,有demo
樓上兩個答案也是....
<p class="wrapper"></p> <script type="text/javascript"> var loadBG = (function(){ var wrapper = document.querySelector('.wrapper'), tpl = '<p class="bg" style="background:#000;">我是纯色</p>', video = document.createElement("video"), img = document.createElement("img"); var FSM = { "video" : { "fn" : function(){ var _self = this; video.onload = function(e){ wrapper.appendChild(video); }; video.onerror = function(e){ _self.fsm.img.fn.call(_self); }; video.src = "bg.video"; } }, "img" : { "fn" : function(){ var _self = this; img.onload = function(e){ wrapper.appendChild(video); }; img.onerror = function(e){ _self.fsm.def.fn.call(_self); }; img.src = "bg.img"; } }, "def" : { "fn" : function(){ wrapper.innerHTML = tpl; } } }; return { fn : function(){ this.fsm = FSM; this.fsm.video.fn.call(this); } } })(); loadBG.fn(); </script>
我沒具體去測試過,但是應該沒什麼問題的。
var video = document.getElementById("video");1、屬性和方法a、錯誤
video.error; //null:正常
video.error.code; //回傳錯誤編碼 1.使用者終止 2.網路錯誤 3.解碼錯誤 4.URL無效
b、網路狀態
video.currentSrc; //傳回目前資源的URL
video.src = value; //傳回或設定目前資源的URL
video.canPlayType(type); //是否能播放某種格式的資源
video.networkState; //返回網路狀態碼 0.此元素未初始化 1.正常但沒有使用網路 2.正在下載資料 3.沒有找到資源
video.load(); //重新載入src指定的資源
video.buffered; //傳回已緩衝區域
video.preload; //傳回預先載入資訊 none:不預載 metadata:預載資源資訊 auto:
c、播放狀態
video.currentTime = value; //目前播放的位置,賦值可改變位置
video.startTime; //一般為0,如果為串流媒體或不從0開始的資源,則不為0
video.duration; //目前資源長度 串流回傳無限
video.paused; //是否暫停
video.defaultPlaybackRate = value;//預設的回放速度,可設定
video.playbackRate = value;//目前播放速度,設定後馬上改變
video.played; //傳回已經播放的區域,TimeRanges
video.ended; //是否結束
video.autoPlay; //是否自動播放
video.loop; //是否循環播放
video.play(); //播放
video.pause(); //暫停
d、視訊控制
video.controls;//是否有預設控制條
video.volume = value; //音量
video.muted = value; //靜音
2、事件
video.addEventListener("XXX" , function(){ //..... })
XXX是事件類型loadstart //客戶端開始請求資料
progress //客戶端正在請求資料
suspend//延遲下載
abort //客戶端主動終止下載(不是因為錯誤引起)
loadstart //客戶端開始請求資料
error //請求資料時遇到錯誤
stalled //網路速度失速
play //play()和autoplay開始播放時觸發
pause//pause()觸發
loadedmetadata //成功取得資源長度
waiting//等待數據,並非錯誤
playing//開始回放
canplay//可以播放,但中途可能因為加載而暫停
canplaythrough//可以播放,歌曲全部加載完畢
seeking //尋找中
seeked//尋找完畢
timeupdate //播放時間改變
ended//播放結束
ratechange//播放速率改變
durationchange //資源長度改變
volumechange //音量改變
這種東西在網上一搜一大把啊
http://www.webhek.com/post/vi...
比如上面的這個
有代碼,有demo
樓上兩個答案也是....
我沒具體去測試過,但是應該沒什麼問題的。
var video = document.getElementById("video");
1、屬性和方法
a、錯誤
video.error; //null:正常
video.error.code; //回傳錯誤編碼 1.使用者終止 2.網路錯誤 3.解碼錯誤 4.URL無效
b、網路狀態
video.currentSrc; //傳回目前資源的URL
video.src = value; //傳回或設定目前資源的URL
video.canPlayType(type); //是否能播放某種格式的資源
video.networkState; //返回網路狀態碼 0.此元素未初始化 1.正常但沒有使用網路 2.正在下載資料 3.沒有找到資源
video.load(); //重新載入src指定的資源
video.buffered; //傳回已緩衝區域
video.preload; //傳回預先載入資訊 none:不預載 metadata:預載資源資訊 auto:
c、播放狀態
video.currentTime = value; //目前播放的位置,賦值可改變位置
video.startTime; //一般為0,如果為串流媒體或不從0開始的資源,則不為0
video.duration; //目前資源長度 串流回傳無限
video.paused; //是否暫停
video.defaultPlaybackRate = value;//預設的回放速度,可設定
video.playbackRate = value;//目前播放速度,設定後馬上改變
video.played; //傳回已經播放的區域,TimeRanges
video.ended; //是否結束
video.autoPlay; //是否自動播放
video.loop; //是否循環播放
video.play(); //播放
video.pause(); //暫停
d、視訊控制
video.controls;//是否有預設控制條
video.volume = value; //音量
video.muted = value; //靜音
2、事件
XXX是事件類型
loadstart //客戶端開始請求資料
progress //客戶端正在請求資料
suspend//延遲下載
abort //客戶端主動終止下載(不是因為錯誤引起)
loadstart //客戶端開始請求資料
error //請求資料時遇到錯誤
stalled //網路速度失速
play //play()和autoplay開始播放時觸發
pause//pause()觸發
loadedmetadata //成功取得資源長度
waiting//等待數據,並非錯誤
playing//開始回放
canplay//可以播放,但中途可能因為加載而暫停
canplaythrough//可以播放,歌曲全部加載完畢
seeking //尋找中
seeked//尋找完畢
timeupdate //播放時間改變
ended//播放結束
ratechange//播放速率改變
durationchange //資源長度改變
volumechange //音量改變