HTML5的视频音频

2015 12月 25日
使用HTML5中的video标签和audio标签可以很简单的实现一个媒体播放器，相比于以前的实现方法，比如Flash来说，浏览器加载的更快，而且基本上主流的浏览器都支持这两个标签。 视频播放练习

1.使用video标签播放视频


音量：


进度：


播放速度：


使用video标签就可以进行视频的播放

1
2
3
4
<video src="视频源" autoplay="autoplay" controls="提供暂停、播放等控件">
	"用于视频播放不成功的时候显示的文字"
	autoplay,顾名思义，自动播放
</video>

同时video标签还支持多src

1
2
3
4
5
<video controls="提供暂停、播放等控件">
	<source src="movie.ogg" type="video/ogg">
	<source src="movie.mp4" type="video/mp4">
	"您的浏览器不支持播放该视频。"
</video>

要添加媒体片段，只需向媒体网址添加 #t=[start_time][,end_time] 即可。例如，要播放第 5 秒和第 10 秒之间的视频，请指定以下代码：

1
<source src="movie.ogg#t=5,10" type="video/ogg">

为视频元素添加 poster 属性，以便用户可以在视频加载后立即了解其内容，而无需下载视频或开始播放。如果视频 src 损坏或提供的视频格式均不受支持，那么海报也可用作后备资源。海报图片唯一的缺陷是它需要一个额外的带宽。

1
2
3
<video poster="poster.jpg" ...>
  ...
</video>

2.使用audio标签播放音频

直到现在，仍然不存在一项旨在网页上播放音频的标准。今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。


audio标签也提供了一些属性来控制音频的播放

1
2
3
4
5
6
7
8
9
<audio controls="提供暂停、播放等控件">
	<source src="movie.mp3" type="audio/mp3">
	<source src="movie.wav" type="audio/wav">
	"您的浏览器不支持播放该音频。"
	audio标签也还提供了自动播放属性autoplay
	同时还有一个preload用来设置在页面加载的时候是不是加载音频，预备播放，
	如果设置了自动播放的话这个属性的设置就会忽略。
	以及提供了loop，每当音频结束时重新开始播放。
</audio>

3.除了标签，还有。。

video以及audio有许多的属性和方法都是通用的，比如duration、paused等，其中通用的属性没有写标签名，单独拥有的属性使用各自的标签进行属性引用

3.1video相关的API以及属性

readOnly属性

duration：整个媒体文件的播放时长，单位s

paused ：如果媒体文件被暂停，则返回true；如果还没开始播放，默认返回true

buffered ：返回当前媒体已经缓冲部分的TimeRange对象

ended ：如果媒体文件播放完毕，则返回true

write属性

currentSrc ：返回当前媒体的URL

currentTime：以s为单位返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置

volume ：在0.0到1.0之间设置音频音量的相对值，或者查询当前音量相对值

muted ：检测当前是否为静音，是则为true；为文件设置静音或消除静音

控制函数

play() ：播放视频文件

pause() ：暂停处于播放状态的视频文件

canPlayType() ：测试video元素是否支持给定MIME类型的文件

监听事件

ontimeupdate ：当currentTime发生改变时触发该事件，一般用于快进、倒退操作

onvolumechange：当音量发生改变的时候运行的脚本，用来更新音量

onprogress：当音视频播放的时候运行的脚本，用来改变进度条

3.2全屏控制以及加载API

没有做兼容性处理

video.webkitRequestFullScreen()：全屏显示

document.webkitCancelFullScreen()：退出全屏

document.webkitIsFullScreen：如果当前处于全屏状态，则返回true,否则返回false

document.addEventListener('webkitfullscreenchange', handler)：当在全屏和非全屏状态切换时，触发该事件

oncanpla(事件)：当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时），用来获取总的视频时长以及音量

3.3本地文件读取API

视频播放器支持从本地添加视频文件播放，支持的格式在webkit浏览器支持的html5视频播放标准范围内。本地文件读取API是html5的新标准。

window.URL.createObjectURL(file)：file为文件对象，该函数返回指向文件的对象URL，通过该URL可以访问文件。

video.src = window.URL.createObjectURL(file);

如果使用网络视频的话，直接按照原来的方法写src

video.src = "video url";

HTML5