首頁  >  問答  >  主體

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

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

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

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

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

阿神阿神2735 天前796

全部回覆(3)我來回復

  • 滿天的星座

    滿天的星座2017-05-18 10:48:57

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

    回覆
    0
  • 淡淡烟草味

    淡淡烟草味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>

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

    回覆
    0
  • 阿神

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

    回覆
    0
  • 取消回覆