HTML5视频播放标签video和音频播放标签audio标签的(2)


指定视频从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);

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzszd.html