HTML5学习之视频和音频

最新推荐文章于 2025-05-22 21:51:57 发布

原创最新推荐文章于 2025-05-22 21:51:57 发布 · 770 阅读

0 ·

CC 4.0 BY-SA版权

Html5/CSS 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML5中视频与音频标签的使用方法，包括常见属性、API方法及事件，展示了如何通过JavaScript实现播放控制，适用于网页开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.HTML5 IE浏览器的话，需要IE9或以上才支持

2.案例代码

<!doctype html>
<html>
	<head></head>
	<body>
		<!--<video src="movie.webm" controls="controls">
			您的破浏览器不支持，请升级为IE9或换其他浏览器。
		</video>
		<hr />
		多资源的视频播放
		<video controls="controls" width="500" height="500" autoplay="autoplay" loop="loop" poster="PLMM.jpg">
			<source src="movie.ogg" type="video/ogg" />
			<source src="movie.webm" type="video/webm" />
			您的浏览器不支持视频标签，还不赶快升级。
		</video>-->
		<hr />
		使用以下VIDEO标签的API<br />
		<video src="movie.webm" controls="controls" id="video">
			您的破浏览器不支持，请升级为IE9或换其他浏览器。
		</video>
		<br />
		<button onclick="bofang()">播放</button>
		<button onclick="zanting()">暂停</button>
		<button onclick="kuaijin()">快进10秒</button>
		<button onclick="kuaitui()">快退10秒</button>
		<button onclick="shutup(this)">闭嘴</button>
		<button onclick="soso()">加速播放</button>
		<button onclick="yu()">减速播放</button>
		<button onclick="normal()">正常播放</button>
		<button onclick="upper()">提高嗓门</button>
		<button onclick="lower()">降低嗓门</button>
		<script>
			//获取对应的video标签
			var video=document.getElementById('video');
			//播放方法
			function bofang(){
				video.play();
			}
			//暂停方法
			function zanting(){
				video.pause();
			}
			//快进10秒
			function kuaijin(){
				video.currentTime+=10;//相当于video.currentTime=video.currentTime+10
			}
			//快退10秒
			function kuaitui(){
				video.currentTime-=10;
			}
			//静音按钮
			function shutup(obj){
				if(video.muted){
					obj.innerHTML="闭嘴";
					video.muted=false;
				}else{
					obj.innerHTML="张嘴";
					video.muted=true;
				}
			}
			//加速播放(3倍速度)
			function soso(){
				video.playbackRate=3;
			}
			//慢速播放(慢三倍)
			function yu(){
				video.playbackRate=1/3;
			}
			//正常倍速
			function normal(){
				video.playbackRate=1;//默认的播放倍速是1
			}
			//调高声音
			function upper(){
				video.volume+=0.2;//声音值的范围是0-1
			}
			//调低声音
			function lower(){
				video.volume-=0.2;
			}
		</script>
		<hr />
		音频标签的使用<br />
		<audio src="MP3.mp3" controls="controls">
			您的破浏览器不支持，请升级为IE9或换其他浏览器。
		</audio>
	</body>
</html>

Video的常见属性

属性	值	描述
Autoplay	Autoplay	视频就绪自动播放
controls	controls	向用户显示播放控件
Width	Pixels(像素)	设置播放器宽度
Height	Pixels(像素)	设置播放器高度
Loop	Loop	播放完是否继续播放该视频，循环播放
Preload	Proload	是否等加载完再播放
Src	url	视频url地址
Poster	Imgurl

Video的API方法

方法	属性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType

	全屏	退出全屏
Webkit (Safari5.1 /Chrome 15)	element.webkitRequestFullScreen();	document.webkitCancelFullScreen();
Firefox (works in nightly)	element.mozRequestFullScreen();	document.mozCancelFullScreen();
W3C 提议	element.requestFullscreen();

Video的API属性

属性	说明
audioTracks	返回可用的音轨列表（MultipleTrackList对象）
autoplay	媒体加载后自动播放
buffered	返回缓冲部件的时间范围(TimeRanges对象)
controller	返回当前的媒体控制器（MediaController对象）
controls	显示播控控件
crossOrigin	CORS设置
currentSrc	返回当前媒体的URL
currentTime	当前播放的时间，单位秒 (快进快退10秒)
defaultMuted	缺省是否静音
defaultPlaybackRate	播控的缺省倍速

属性	说明
duration	返回媒体的播放总时长，单位秒
ended	返回当前播放是否结束标志
error	返回当前播放的错误状态
initialTime	返回初始播放的位置
loop	是否循环播放
mediaGroup	当前音视频所属媒体组 (用来链接多个音视频标签)
muted	是否静音
networkState	返回当前网络状态
paused	是否暂停
playbackRate	播放的倍速(加速、减速播放)
played	当前播放部件已经播放的时间范围(TimeRanges对象)
preload	页面加载时是否同时加载音视频

属性	说明
seeking	返回用户是否做了跳转操作
src	当前音视频源的URL
startOffsetTime	返回当前的时间偏移(Date对象)
textTracks	返回可用的文本轨迹(TextTrackList对象)
videoTracks	返回可用的视频轨迹(VideoTrackList对象

Video的常用事件

事件	描述
abort	当音视频加载被异常终止时产生该事件
canplay	当浏览器可以开始播放该音视频时产生该事件
canplaythrough	当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange	当媒体的总时长改变时产生该事件
emptied	当前播放列表为空时产生该事件
ended	当前播放列表结束时产生该事件
error	当加载媒体发生错误时产生该事件
loadeddata	当加载媒体数据时产生该事件
loadedmetadata	当收到总时长，分辨率和字轨等metadata时产生该事件
loadstart	当开始查找媒体数据时产生该事件

事件	描述
pause	当媒体暂停时产生该事件
play	当媒体播放时产生该事件
playing	当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
progress	当获取到媒体数据时产生该事件
ratechange	当播放倍数改变时产生该事件
seeked	当用户完成跳转时产生该事件
seeking	当用户正执行跳转时操作的时候产生该事件
stalled	当试图获取媒体数据，但数据还不可用时产生该事件
suspend	当获取不到数据时产生该事件
timeupdate	当前播放位置发生改变时产生该事件

audio的常见属性

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的音频的 URL。