指定视频从10秒开始播放,到20秒处结束。
指定视频从头开始播放到 10.5 秒处。
指定视频播放2小时。
指定视频从第60秒开始播放,播放到结束。
设置视频封面(poster参数)
当视频不是自动播放时,在有些浏览器里,视频在未播放前的缺省界面是空白,这样很没有意义,我们可以给视频设定一个封面,用视频里的某个比较具有代表意义的画面截图作为视频的封面,设定视频封面的参数是 poster:
<video poster='cover.jpg' src="https://www.jb51.net/~j/theora_testsuite/320x240.ogg" controls autoplay loop> Your browser does not support the <code>video</code> element. </video>
当视频加载遇到错误时的补救方法
有时候视频资源会失效,或加载失败,或者浏览器不能解码当前视频格式,当遇到这种情况,我们应该给与补救措施,替换当前视频资源地址,或用其它措施补救,比如将video对象替换成图片。我们可以使用JavaScript对视频加载中的“error”事件进行监听,比如对于下面的视频资源:
<video controls> <source src="https://www.jb51.net/dynamicsearch.mp4" type="video/mp4"></source> <a href="https://www.jb51.net/dynamicsearch.mp4" > <img data-original="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS"> </a> <p>Click image to play a video demo of dynamic app search</p> </video>
我们使用下面的js代码进行补救:
var v = document.querySelector('video'), sources = v.querySelectorAll('source'), lastsource = sources[sources.length-1]; lastsource.addEventListener('error', function(ev) { var d = document.createElement('div'); d.innerHTML = v.innerHTML; v.parentNode.replaceChild(d, v); }, false);