Video&Audio（进阶篇）

最新推荐文章于 2023-09-09 14:27:54 发布

 ;

最新推荐文章于 2023-09-09 14:27:54 发布

阅读量603

点赞数

分类专栏： HTML5 文章标签： Video Audio HTML5多媒体 JavaScript

本文链接：https://blog.csdn.net/weixin_42210229/article/details/86672146

版权

HTML5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在HTML5中可以很轻松的处理视频与音频，在HTML5中不仅可简单的播放视频/音频，而且可方便的进行变速播放，方向播放，等等。尤其是可将Canvas与视频进行结合，大大扩展显示效果。在HTML5中进行音频与视频的处理时，几乎可以使用相同的属性与方法。

在没有HTML5以前，在页面中播放视频时必须通过Flash插件。HTML4中只能通过插件才能处理视频与音频。对于iPhone、Android等移动设备来说，并不支持Flash，通过Flash进行播放的视频页面将不能显示。自从移动设备的浏览器中支持HTML5的视频以及音频处理功能后，没有Flash也能够播放视频/音频。

举个栗子：

可以通过样式单自由的指定显示位置、视频屏幕尺寸大小等。另外，可以在同一页面内可以显示多个视频，而且还可以将多个视频重叠显示。还可以上重叠字符串以及图像。这种重叠方式，可以轻松的实现与字幕的重叠显示。以前要追加字幕必需剪辑视频，现在只要编辑HTML文档就可以了。而且在搜索引擎中也能搜索到字幕，将其翻译一下就可以实现多语言版本。

讲解：

基本语句:<video src="sample.mov"></video>

但是，在Firefox及Opera中不支持H.264编解码器,使用H.264编解码器的视频将不能显示。HTML5是通过在<video>中追加<source>子元素的方式解决这个问题。浏览器会遍历<video>中追加<source>子元素，直至寻找到可播放的视频文件为止。

<video>中定义了各种属性。

<video controls>
    <source src="sample.mov"></source>
    <source src="sample.ogv"></source>
    <p>浏览器不支持<video>视频功能</p>
</video>

**<video>标签定义的属性**
属性	说明
src	视频数据的URL
poster	视频的缩略图
preload	自动缓冲（Firefox中为autobuffer）
autoplay	自动播放
loop	循环播放
controls	显示控制器
width	宽度
height	高度

<audio>与<video>一样，也定义了不少属性，但相对<canvas>标签来说，<audio>属性数量稍少。

**<audio>标签中定义的属性**
属性	说明
src	视频数据的URL
preload	自动缓冲（Firefox中为autobuffer）
autoplay	自动播放
loop	循环播放
controls	显示控制器

Video和Audio的方法与属性：

在HTML5中，视频与音频同属于媒体处理范畴。因此，其可以使用的属性与方法是共同的。首先，就方法而言，video和audio都有导入、播放、暂停、检查是否可播放等方法。主要方法以及属性：

**Video和Audio的主要方法**
方法	说明
play()	播放处理
pause()	暂停处理
load()	导入视频/音频数据
canPlayType()	判断参数中指定的MIME类型的媒体文件是否可播放。返回空字符则不可播放。返回maybe则可播放

**Video和Audio的主要属性**
属性	说明
currentTime	当前的播放时间
duration	视频/音频的时长
paused	是否暂停
ended	是否播放到最后，播放到最后时值为true
playbackBate	播放速度。2时则表示2倍速。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>快进/从头开始/播放的最后换歌/播放</title>
<style type="text/css">
	.btn{
		border: 1px solid #35210D;
		padding: 10px;
		background-color: #B87412;
		color: white;
		font-size: 16px;
	}
</style>
</head>

<body>
<div>
	<audio id="myAudio" src="../../source/花雨溪-追光者.mp3" width="1200" height="24"></audio>
</div>
<div>
	<button class="btn" onclick="audioRetreat()">&lt;&lt;</button>
	<button class="btn" id="change" onclick="audioPlay()">|&gt;</button>
	<button class="btn" onclick="audioSppedFF()">&gt;&gt;</button>
	<button class="btn" onclick="audioPlayFirst()">重新播放</button>
	<button class="btn" id="speed" onclick="audioSedPlay()">1.0×</button>
</div>
<script type="text/javascript">
	var myAudio=document.getElementById("myAudio");
	var isPaly=false;
	//播放
	function audioPlay(){
		timer=setInterval(audioEnded,1000);
		if(isPaly){
			myAudio.pause();
			isPaly=false;
			document.getElementById("change").innerHTML="|>";
		}else{
			myAudio.play();
			isPaly=true;
			document.getElementById("change").innerHTML="||";
		}
	}
	//从头开始播放
	function audioPlayFirst(){
		timer=setInterval(audioEnded,1000);
		document.getElementById("change").innerHTML="||";
		myAudio.currentTime=0;
		myAudio.play();
	}
	//快进
	function audioSppedFF(){
		myAudio.currentTime+=5;
		if(myAudio.ended){
			audioPlayFirst();
		}else{
			myAudio.play();
		}
	}
	//后退
	function audioRetreat(){
		if(myAudio.currentTime>=5){
			myAudio.currentTime-=5;
			myAudio.play();
		}else{
			audioPlayFirst();
		}
	}
	//2倍速
	function audioSedPlay(){
		if(myAudio.playbackRate==1){
			myAudio.playbackRate=2;
			document.getElementById("speed").innerHTML="2.0×";
		}else{
			myAudio.playbackRate=1;
			document.getElementById("speed").innerHTML="1.0×";
		}
	}
	//播放结束
	function audioEnded(){
		if(myAudio.ended){
			myAudio.pause();
			document.getElementById("change").innerHTML="|>";
			clearInterval(timer);
		}
	}
	window.onload=function(){
		timer=setInterval(audioEnded,1000);
	}
</script>
</body>
</html>

事件以及事件发生顺序：

时间概念：

**事件列表（部分）**
事件	说明
loadstart	数据导入开始
progress	处理中
suspend	发生延迟
abort	数据传送中断
error	发生错误
emptied	数据为空
stalled	停止中（网络停止）
play	播放开始
pause	暂停
load	数据全部完成导入
loadedmetadata	meta数据完成导入
loadeddata	实体数据完成导入
waiting	待机中
playing	播放中
canplay	变成可播放状态时（但可能在播放途中中断）
canplaythrough	变成可一直播放到最后的状态（预测而非保证）
seeking	搜索中
seeked	搜索结束
timeupdata	搜索结束
ended	播放时间被更新
ratechange	播放速率发生变化
durationchange	播放时长发生变化
volumechange	音量发生变化

下面介绍在各浏览器中都可以使用的主要事件：

canplay 变成可播放状态时

canplay事件在视频/音频数据被下载一定量后面而达成可以播放的状态时发生。此事件在本地以及服务器中都可以响应。如果是自定义播放按钮，可捕捉此事件后再调用播放方法。

play、playing

play事件在视频/音频将开始播放时发生，而playing事件在视频/音频已开始播放时发生。而播放中触发的事件并非playing。

timeupdate

timeupdate事件在视频/音频播放后，播放时间更新时发生。timeuoadate事件的发生时随浏览器的不同而有所差异。在Firefox中，基本上是随着帧的变化而发生。而在Safari及Opera浏览器中1秒中会发生多次。当将视频传送到Canvas中进行实时处理时，timeupdate事件并不实用。此时使用setTimeout()或setInterval()，定时向Canvas传送视频的方式更好。特别是在Firefox中因为随着帧的变化会不断触发timeupdate事件，播放时消耗的内存资源会更多。

ended

ended事件在视频播放结束时触发。另外如果在<video>中指定loop属性，则ended事件不会发生。

事件的发生顺序：

不同的浏览器中支持的事件不仅不同，而且发生顺序也有差异。将来随着浏览器版本的升级有可能发生变化。

**视频导入时发生的事件及顺序（本地）**
Firefox 3.6	Safari 4	Safari 5	Chrome 4
progress	loadstart	loadstart	loadstart
canplay	durationchange	durationchange	durationchange
canplaythrough	loadedmetadata	loadedmetadata	loadedmetadata
suspend	loadeddata	loadeddata	loadeddata
	canplay	progress	canplay
	canplaythrough	canplay	canplaythrough
	load	canplaythrough	progress
		load	load

**视频导入时发生的事件及顺序（服务器）**
Firefox 3.6	*Safari 4/51**	Chrome 4/5	*iPad 2**
suspend	loadstart	loadstart	durationchange
canplay	durationchange	suspend	loadedmetadata
progress	loadedmetadata	durationchange	loadeddata
	loadeddata	loadedmetadata	canplay
	canplay	loadeddata	canplaythrough

**视频播放时发生的事件及顺序（本地）**
Firefox 3.6	*Safari 4/51**	Chrome 4/5
play	play	play
playing	playing	playing
timeupdate	timeupdate	timeupdate
ended	ended	ended

**视频播放时发生的事件及顺序**
Firefox 3.6	Safari 4/5	Chrome 4/5	*iPad 3**
play	play	play	play
playing	playing	playing	playing
timeupdate	timeupdate	timeupdate	timeupdate
progress	ended	ended	ended
waiting
canplay
playing
canplaythrough
suspend
ended