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