我準備了三個東西,一個為純色p背景,一個為影片的第一幀截圖,一個為一段影片。
我想的是,若影片無法載入成功,就用截圖代替,若截圖也無法載入成功就用純色p來代替。
請教一下,如何實現這個功能,或者說如何抓取影片和截圖載入的完成情況狀態?
本人小白,煩請大神指教~(最好能上點兒生動的代碼,謝謝各位了)
淡淡烟草味2017-05-18 10:48:57
樓上兩個答案也是....
<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>
我沒具體去測試過,但是應該沒什麼問題的。
阿神2017-05-18 10:48:57
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 //音量改變