网页音频抓取( 如何嵌入视频和音频在网页里嵌入HTML5音频播放器和视频播放器)

　　网页音频抓取(

如何嵌入视频和音频在网页里嵌入HTML5音频播放器和视频播放器)

　　HTML5视频/音频的使用介绍

　　« 上一章

　　下一章 »

　　HTML5中引入的新标签，实现了HTML对视频播放和音频播放的原生支持，有了这个原生的HTML5视频播放器/音频播放器，我们不再需要flash技术，可以直接将视频/音频嵌入到网页中。

　　如何嵌入视频和音频

　　在网页中嵌入 HTML5 音频播放器和视频播放器的方法非常简单：

　　

Your browser does not support the video element.

　　上面的示例展示了如何播放视频文件并公开视频播放控件。

　　下面是一个如何在 HTML 页面中嵌入音频音频的示例：

　　

<p>Your browser does not support the audio element.

</p>

　　这里的 src 属性可以填写音视频 URL 或本地文件。

　　

<p>Your browser does not support the audio element

</p>

　　这里是和两个标签上的控件属性的含义：

　　这里的 preload 属性是用来缓存大文件的。它具有三个可选值：

　　为了兼容各种浏览器对不同媒体类型的支持，我们可以使用多个元素来提供多种不同的媒体类型。例如：

　　

Your browser does not support the video element.

　　支持 Ogg 格式视频流的浏览器可以播放 Ogg 文件。如果不支持，可以播放 MPEG-4 文件。要查看浏览器对各种媒体类型的支持，请查看此处。

　　我们还可以指定用于播放的编*敏*感*词*（codecs）；这使浏览器可以更准确地了解如何播放提供的视频：

　　

Your browser does not support the video element.

　　上面，我们指定此视频需要使用 Dirac 和 Speex 编*敏*感*词*。如果浏览器支持 Ogg 格式，但没有指定编*敏*感*词*，则不会加载视频。

　　如果没有提供 type 属性，浏览器会向服务器询问媒体类型，看是否支持；如果没有，浏览器将转到下一个源属性。

　　使用 JavaScript 控制视频/音频播放

　　一旦视频文件被正确嵌入到 HTML 页面中，我们就可以使用控制它的 JavaScript 部分来获取其播放信息。例如，要使用 JavaScript 开始视频播放：

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

v.play();

　　使用 JavaScript 控制 HTML5 视频播放器的播放、暂停、快进、快退、音量等。

　　

播放

暂停

降低音量

提高音量

　　停止下载视频文件

　　虽然我们可以使用 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); // 返回已经播放的时间长度(秒)

　　设置播放范围

　　在网页中嵌入视频/音频文件时，或元素允许我们提供一些额外的信息来指定播放的时间段。执行此操作的方法是使用 ("#") 格式信息跟随媒体文件。

　　其具体语法如下：

　　#t=[开始时间][,结束时间]

　　时间可以用秒表示，或者您可以提供“时:分:秒”格式的时间（例如 2:05:01）。/p&gt;

　　例子：

　　#t=10,20