我准备了三个东西,一个为纯色p背景,一个为视频的第一帧截图,一个为一段视频。
我想的是,若视频无法加载成功,就用截图代替,若截图也无法加载成功就用纯色p来代替。
请教一下,如何实现这个功能,或者说如何抓取视频和截图加载的完成情况状态?
本人小白,烦请大神指教~(最好能上点儿生动的代码,谢谢各位了)
闭关修行中......
这种东西在网上一搜一大把啊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 //音量改变
这种东西在网上一搜一大把啊
http://www.webhek.com/post/vi...
比如上面的这个
有代码,有demo
楼上两个回答也是....
我没具体去测试过,但是应该没什么问题的。
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、事件
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 //音量改变