怎样嵌入视频和音频

在网页里嵌入HTML5音频播放器和视频播放器的方式比较简单:

<video src="//www.jb51.net/~j/theora_testsuite/320x240.ogg" controls autoplay loop>
 Your browser does not support the <code>video</code> element.
</video>

上边这一事例显示信息了怎样播放视频一个视频文档,并外露视频播放视频控制按钮。

下边这一事例是在HTML网页里嵌入音频 audio 的方式:

<audio controls autoplay loop src="/test/audio.ogg">
<p>Your browser does not support the <code>audio</code> element.</p>
</audio>

这儿的 src 特性里能够 填写一个音频/视频的URL,还可以是一个当地的文档。

<audio src="audio.ogg" controls autoplay loop>
<p>Your browser does not support the <code>audio</code> element </p>
</audio>

下边是<audio> 和 <video> 2个标识上操纵特性的含意:

controls : 显示信息规范的 HTML5 视频/音频播放器操纵条、控制按钮。
autoplay : 让文档全屏播放。
loop : 让文档循环播放。

<audio src="audio.mp3" preload="auto" controls></audio>

这儿的 preload 特性是用于缓存文件大容积文档的。它有三个可选值:

"none" 不缓存文件
"auto" 缓存文件
"metadata" 只缓存元信息内容
为了更好地可以适配各种各样电脑浏览器对不一样新闻媒体种类的适用,大家可以用好几个 <source> 原素来出示好几个不一样的新闻媒体种类。比如:

<video controls>
 <source src="foo.ogg" type="video/ogg">
 <source src="foo.mp4" type="video/mp4">
 Your browser does not support the <code>video</code> element.
</video>

适用Ogg文件格式视频流的电脑浏览器可以播放 Ogg 文档。假如不兼容,可以播放 MPEG-4 文档。查询各种各样电脑浏览器对各种各样新闻媒体种类的适用状况,请查询这儿。

大家还能够特定播放视频应用的音频解码器(codecs); 那样就可以更精准的让电脑浏览器怎样播放视频出示的视频:

<video controls>
 <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
 Your browser does not support the <code>video</code> element.
</video>

上边,大家特定了这一视频必须应用 Dirac 和 Speex 音频解码器。假如电脑浏览器适用 Ogg 文件格式,但沒有特定的音频解码器,那麼,视频将不容易被载入。

要是没有出示 type 特性,则电脑浏览器会向网络服务器了解新闻媒体种类,看一下是不是适用;假如不兼容,电脑浏览器可能去查验下一个 source 特性。

用JavaScript操纵视频/音频播放视频

一旦视频文档恰当的嵌入来到HTML网页里,大家就可以应用JavaScript里操纵它的一部分,获得它的播放视频信息内容。例如,用JavaScript起动视频播放视频:

var v = document.getElementsByTagName("video")[0];
v.play();

用JavaScript可操纵HTML5视频播放器完成播放视频、中止、快放,快退、声音等。

<audio id="demo" src="audio.mp3"></audio>
<div>
 <button onclick="document.getElementById('demo').play()">播放视频</button>
 <button onclick="document.getElementById('demo').pause()">中止</button>
 <button onclick="document.getElementById('demo').volume =0.1">减少声音</button>
 <button onclick="document.getElementById('demo').volume-=0.1">提高音量</button>
</div> 

终止免费下载视频文档

尽管我们可以应用pause()方式里让视频文档停止播放,但电脑浏览器仍未终止免费下载文件类型,除非是它做到了一定的缓存文件量。

下边是让电脑浏览器怎样终止免费下载视频文档的方式:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//或
mediaElement.removeAttribute("src"); 

根据删掉 src 特性(或是设定为空值),那样就能终止文档的互联网下载。

设置播放视频的时间点精准定位

我们可以特定视频从某时某分某秒开播,它是根据设定 currentTime 特性来完成。

我们可以根据 seekable 特性来得到视频合理的播放视频时间段。它会回到一个 TimeRanges 目标,可以对你说合理的开始时间和完毕時间。

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0); // 回到开始时间 (秒)
mediaElement.seekable.end(0);  // 回到完毕時间 (秒)
mediaElement.currentTime = 122; // 精准定位到第 122 秒播放视频
mediaElement.played.end(0);   // 回到早已播放视频的時间长短(秒)

设置播放视频范畴

当在网页里嵌入视频/音频文档时, <audio> 或 <video> 原素容许大家出示一些附加的信息内容来特定播放视频哪一时间范围。完成的方式是在文件类型后边追随(“#”)文件格式的信息内容。

它的实际英语的语法是那样的:

#t=[开始时间][,完毕時间]
時间的表明方式能够 应用分秒,还可以出示一个 ”时:分:秒“ 文件格式的時间(比如 2:05:01 )。/p>

举例说明:

//www.jb51.net/video.ogg#t=10,20
特定视频从10秒开播,到20秒处完毕。
//www.jb51.net/video.ogg#t=,10.5
特定视频重新开始播放视频到 10.5 秒处。
//www.jb51.net/video.ogg#t=,02:00:00
特定视频播放视频2钟头。
//www.jb51.net/video.ogg#t=60
特定视频从第60秒开播,播放视频到完毕。

设定视频封面图(poster主要参数)

当视频并不是全屏播放时,在一些电脑浏览器里,视频在未播放视频前的默认设置页面是空缺,那样很没有意义,我们可以给视频设置一个封面图,用视频里的某一较为具备意味着实际意义的界面截屏做为视频的封面图,设置视频封面图的主要参数是 poster:

<video poster='cover.jpg' src="//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="dynamicsearch.mp4" type="video/mp4"></source>
 <a href="dynamicsearch.mp4" rel="external nofollow" >
  <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);

大量有关HTML5视频播放器video标识和音频播放器audio标识的恰当使用方法请查看更多下边的类似文章