javascript - 用视频作为页面背景的问题
阿神
阿神 2017-05-18 10:46:57
0
3
825

我准备了三个东西,一个为纯色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 //音量改变

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板