javascript - 用影片當作頁面背景的問題

Question

我準備了三個東西，一個為純色p背景，一個為影片的第一幀截圖，一個為一段影片。

我想的是，若影片無法載入成功，就用截圖代替，若截圖也無法載入成功就用純色p來代替。

請教一下，如何實現這個功能，或者說如何抓取影片和截圖載入的完成情況狀態？

本人小白，煩請大神指教~（最好能上點兒生動的代碼，謝謝各位了）

Answer 1

這種東西在網上一搜一大把啊
http://www.webhek.com/post/vi...
比如上面的這個
有代碼，有demo

Answer 2

樓上兩個答案也是....

<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>

我沒具體去測試過，但是應該沒什麼問題的。

Answer 3

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 //音量改變