javascript - 用影片當作頁面背景的問題
阿神
阿神 2017-05-18 10:46:57
0
3
812

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

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

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

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

阿神
阿神

闭关修行中......

全部回覆(3)
滿天的星座

這種東西在網上一搜一大把啊
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 //音量改變

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板