H5_Node2_视频&音频

最新推荐文章于 2025-12-16 20:18:10 发布

原创最新推荐文章于 2025-12-16 20:18:10 发布 · 704 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

html/css篇专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了HTML5音视频技术的发展历程、不同浏览器的支持情况、常用属性与方法及事件处理等内容，并提供了自定义控制条的实现案例。

-->视 / 音频的发展
-->视 / 音频常用属性方法
-->视 / 音频常用事件

一、视 / 音频的发展

1、以前flash视频基本格式
<object> 标签的作用是在 HTML 页面中嵌入多媒体元素
<object daqta="1.swf" width="400"></object>
扩展学习：http://www.jb51.net/html5/89835.html
<embed> 标签的作用是在 HTML 页面中嵌入多媒体元素
<embed src="1.swf" width="400">

问题
需要flash，效率低
如果浏览器不支持 Flash，那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频
将视频转换为其他格式，仍然不能在所有浏览器中播放
目前安卓4.4也抛弃了flash......

2、视频格式

2-1、HTML5 页面视频基本格式

<video width=" " height="" src=""> </video>

width、height属性：

设置媒体元素的大小，单位为像素；
省略该属性，则使用播放源文件的大小；
仅设置宽度值，将根据播放源文件的长宽比例自动生成一个与之对应的高度值。

src 属性：指定播放文件的URL。

2-2、各大浏览器支持的视频格式

并不是每个浏览器都支持mp4格式

2-3、source元素

视频 mp4 格式适用于IE、chrome 和 Safari
要确保视频在Firefox与Opera中也能够正常播放的话怎么办？

source元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式

二、视 / 音频常用属性方法

video常用属性

controls 属性

---在视频元素的底部展示一个元素自带的控制条工具。

用户将鼠标悬停至正在播放的视频时，显示工具条；一但移开，工具条件就会隐藏

autoplay 属性

一旦视频就绪马上开始自动播放。

preload 属性

是否在页面加载后载入视频 ( 预加载 ) 如有autoplay属性则进行忽略
auto （默认） : 当页面加载后载入整个视频
metadata : 只加载播放文件的元信息（如：尺寸、持续时间、第一帧信息、曲目列表等）
none : 当页面加载后不载入视频

loop 属性

视频结束后将重新开始播放。

muted 属性

如果出现该属性，则输出为静音。

poster 属性

将在视频文件播放前显示图片（广告图片）。

duration

整个媒体文件的播放时长，以s为单位

currentTime

当前播放时间，以s为单位

paused

如果媒体文件当前被暂停，则返回true

volume

返回当前播放视频的音量

load ( ) 方法

用于重新加载src指定的媒体文件。

pause ( ) 方法

用于暂停正在播放中的媒体文件。

play ( ) 方法

用于播放媒体文件。

三、视 / 音频常用事件

error--------------请求数据时遇到错误时触发
play---------------开始播放时触发
pause-------------暂停时触发
timeupdate-------播放时间改变时触发
ended-------------播放结束时触发
volumechange----音量改变时触发

提示

可以使用addEventListener 方法来对事件发生进行监听。

video常用属性&方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video1</title>
<style>
*{margin:0;padding:0;list-style: none;}
</style>
</head>
<body>
<!-- <video src="1.mp4" controls></video> -->
<video id="vid" width="600px" controls  muted prelode="auto">
	<source src="1.mp4" type="video/mp4"></source>
	<source src="1.ogg" type="video/ogg"></source>
	你的浏览器不支持video标签！
</video>
<button id="btn" style="font-size: 40px;">按钮</button>
<h1 id="txt"></h1>
<h1 id="txt2"></h1>
<script>
	var vid=document.getElementById('vid');
	var btn=document.getElementById('btn');
	var txt=document.getElementById('txt');
	var txt2=document.getElementById('txt2');
	btn.onclick=function(){
		// txt.innerHTML=vid.duration;//视频总时长
		// txt.innerHTML=vid.currentTime;//当前播放时间
		// vid.currentTime=10;//设置播放时间
		// txt.innerHTML=vid.paused;//视频是否处于暂停状态
		// txt.innerHTML=vid.volume;//当前音量 0~1
		// txt.innerHTML=vid.paused;//视频是否处于暂停状态
		// vid.load();//重新加载视频
		// vid.pause();//暂停正在播放的视频
		vid.play();//播放正在暂停的视频
	}
/*	vid.onerror=function(){
		alert('error');
	}*/
	vid.onplay=function(){
		console.log('视频开始播放!');
	}
	vid.onpause=function(){
		console.log('视频暂停播放!');
	}
	vid.ontimeupdate=function(){
		console.log(vid.currentTime);
	}
	vid.onended=function(){
		console.log('视频结束播放!');
	}
		vid.onvolumechange=function(){
		txt2.innerHTML='音量变化：'+vid.volume;
	}
</script>
</body>
</html>

自定义video控制条

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video2-自定义控制条</title>
<style>
*{margin:0;padding:0;list-style: none;}
#wrap{
	width:600px;
	margin:50px auto 0;
	position: relative;
	overflow: hidden;
}
#ctrl{
	width:580px;
	height: 50px;
	background:rgba(122,119,119,0.5);
	position: absolute;
	left:10px;
	bottom:10px;
	border-radius: 10px;
	overflow: hidden;
	display: none;
}
#play,#speed,#reduce{
	float: left;
	height:40px;
	line-height: 40px;
	color:#A079C0;
	font-size: 20px;
	padding:0 5px;
	margin:5px 10px;
	background: #ccc;
	border-radius:5px;
	cursor:pointer;
}
#rag{
	float: left;
	width:300px;
	height:50px;
	line-height: 50px;
	margin:0 8px;
}
#time{
	float: left;
	width:38px;
	height:50px;
	line-height: 50px;
	font-size: 18px;
	color:#fff;
	margin:0 5px 0 10px;
}
</style>
</head>
<body>
<div id="wrap">
	<button id="btn1">大</button>
	<button id="btn2">中</button>
	<button id="btn3">小</button>
	<video id="vid" poster="zxj2.jpg" width='600px'>
		<source src="1.mp4" type="video/mp4"></source>
		<source src="1.ogg" type="video/ogg"></source>
		你的浏览器不支持video标签！
	</video>
	<div id="ctrl">
		<span id="play">播放</span>
		<input type="range" value="0" min="0" max="30"step="0.1" id="rag">
		<span id="time">0s</span>
		<span id="speed">快进</span>
		<span id="reduce">快退</span>
	</div>
</div>
<script>
	var wrap=document.getElementById('wrap');
	var btn1=document.getElementById('btn1');
	var btn2=document.getElementById('btn2');
	var btn3=document.getElementById('btn3');
	var vid=document.getElementById('vid');
	var ctrl=document.getElementById('ctrl');
	var play=document.getElementById('play');
	var rag=document.getElementById('rag');
	var time=document.getElementById('time');
	var speed=document.getElementById('speed');
	var reduce=document.getElementById('reduce');
wrap.onmouseenter=function(){
	ctrl.style.display='block';
}
wrap.onmouseleave=function(){
	ctrl.style.display='none';
}
play.onclick=function(){
	if (vid.paused) {
		vid.play();
		play.innerHTML='暂停';
	}else{
		vid.pause();
		play.innerHTML='播放';
	}
}
vid.ontimeupdate=function(){
	time.innerHTML=parseInt(vid.currentTime)+'s';
	rag.value=vid.currentTime;
}
speed.onclick=function(){
	vid.currentTime+=5;
}
reduce.onclick=function(){
	vid.currentTime-=5;
}
</script>
</body>
</html>

四、音频格式及常用属性

1、HTML5 页面音频基本格式
<audio src="" controls> </audio>

src：音乐的URL

controls：浏览器自带的控制条

示例：<audio src="01.mp3" controls></audio>

2、音频格式浏览器支持情况

audio音频常用属性

audio的常用属性和方法与video基本一样

如：play( ) 、pause( ) 、autoplay、controls........