必学必会-音频和视频
2021-01-16 本文已影响0人
魔王哪吒
前言
希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)
学习深入理解HTML5
的audio
和video
。
HTML5
视频概述
在HTML5
播放一个视频,很简单,只需要一行代码:
<video src="resources/dadaqianduan.mp4" autoplay></video>
了解多媒体术语
了解视频文件格式:
Audio Video InterLeaved .avi
Flash Video .flv
MPEG-4 .mp4
Matroska .mkv
Ogg .ogv
音频和视频编解码器
编解码器可以理解为一些算法代码,用于处理视频,音频或者其元数据的编码格式。对音频或视频文件进行编码,可使得文件大大缩小,便于在因特网上传输。
音频编解码器:
MP3
,使用ACC
音频
Wav
,使用Wav
音频
Ogg
,使用OggVorbis
音频
视频编解码器:
MP4
,使用H.264
视频,AAC
音频
WebM
,使用VP8
视频,OggVorbis
音频
Ogg
,使用Theora
视频,OggVorbis
音频
多媒体文件格式
audio
元素支持的音频格式MP3,Wav,Ogg
;video
元素支持的格式MP4,WebM,Ogg
。
-
audio
元素是专门用于在网页中播放网络音频的 -
video
元素是专门用于在网页中播放视频的
在HTML5
中audio
和video
元素提供的接口包含了一系列的属性,方法和事件,这些接口可以帮助开发完成对音频和视频的操作。
那么如何在页面中添加音频和视频呢?
音频
<audio src="resources/audio.mp3">
</audio>
视频
<video src="resources/video.mp4" width="600" height="200">
</video>
使用source
元素
因为各种浏览器对音频和视频的编解码器的支持不一样,为了能够在各种浏览器中正常使用,可以提供多个源文件。
<audio src="resources/audio.mp3">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
</audio>
<video src="resources/video.mp4" width="600" height="200" controls>
<source src="movie.ogg" type="video/ogg codes=`theora,vorbis` ">
<source src="movie.mp4" type="video/mp4">
</video>
使用
source
元素替代了audio
或video
的标签属性src
。
-
src
属性用于指定媒体文件的url
地址 -
type
属性用于指定媒体文件的类型,属性值为媒体文件的MIME
类型,该属性值还可以通过codes
参数指定编码格式
audio
和video
特性和属性
元素的标签特性
-
src
,源文件特性,用于指定媒体文件的url
地址 -
autoplay
,自动播放特性,表示媒体文件加载后自动播放。
<video src="resources/video.mp4" autoplay></video>
-
controls
,控制条特性,表示为视频或音频添加自带的播放控制条。
<video src="resources/video.mp4" controls></video>
-
loop
,循环特性,表示音频或视频循环播放。
<video src="resources/video.mp4" controls loop></video>
-
preload
,预加载特性,表示页面加载完成后如何加载视频数据。
-
none
表示不进行预加载 -
metadata
表示只加载媒体文件的元数据 -
auto
表示加载全部视频或音频,默认值为auto
<video src="resources/video.mp4" controls preload="auto"></video>
-
poster
是video
元素独有的特性,替代内容属性,用于指定一副替代图片的url
地址,当视频不可以用时,会显示该替代图片。
<video src="resources/video.mp4" controls poster="images/none.jpg"</video>
-
width
和height
,video
元素独有的特性,用于指定视频的宽度和高度
<video src="resources/video.mp4" width="600" height="200" controls></video>
接口属性
-
currentSrc
,只读,获取当前正在播放或已加载的媒体文件的url
地址 -
videoWidth
,只读,video
元素特有属性,获取视频原始的宽度 -
videoHeight
,只读,video
元素特有属性,获取视频原始的高度 -
currentTime
,获取或设置当前媒体播放位置的时间点 -
startTime
,只读,获取当前媒体播放的开始时间 -
duration
,只读,获取整个媒体文件的播放时长 -
volume
,获取或设置媒体文件播放时的音量,取值范围在0.0
到0.1
之间 -
muted
,获取或设置媒体文件播放时是否静音。true
表示静音,false
表示消除静音 -
ended
,只读,如果媒体文件已经播放完毕则返回true
,否则返回false
-
error
,只读,读取媒体文件的错误代码 -
played
,只读,获取已播放媒体的TimesRanges
对象,该对象内容包括已播放部分的开始时间和结束时间。 -
paused
,只读,如果媒体文件当前是暂停或未播放则返回true
,否则返回false
-
seeking
,只读,获取浏览器是否正在请求媒体数据 -
seekable
,只读,获取媒体资源已请求的TimesRanges
对象,该对象内容包括已请求部分的开始时间和结束时间 -
networkState
,只读,获取媒体资源的加载状态 -
buffered
,只读,获取本地缓存的媒体数据的TimesRanges
对象 -
readyState
,只读,获取当前媒体播放的就绪状态 -
playbackRate
,获取或设置媒体当前的播放速率 -
defaultPlaybackRate
,获取或设置媒体默认的播放速率
视频播放的快进
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>视频播放时的快进</title>
<script type="text/javascript">
function Forward() {
var el = document.getElementById("myPlayer");
var time = el.currentTime;
el.currentTime = time+300;
}
</script>
</head>
<body>
<video id="myPlayer" src="resources/video.mp4" width="600" height="200" controls>
</video>
<br/>
<input type="button" value="快进" onclick="Forward()"/>
</body>
</html>
audio
和video
接口方法
接口方法
-
load()
,加载媒体文件,为播放做准备。 -
play()
,播放媒体文件。 -
pause()
,暂停播放媒体文件。 -
canPlayType()
,测试浏览器是否支持指定的媒体类型。
代码示例使用接口:
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>播放与暂停</title>
<script type="text/javascript">
var videoEl = null;
function Play() {
videoEl.play();
}
function Pause() {
videoEl.pause();
}
window.onload = function(){
videoEl = document..getElementById("myPlayer");
}
</script>
</head>
<body>
<video id="myPlayer" width="600">
<source src="resources/video.mp4" type="video/mp4">
</video><br>
<input type="button" value="播放" onclick="Play()"/>
<input type="button" value="暂停" onclick="Pause()"/>
</body>
</html>
audio
和video
事件
捕获事件的方式
捕获事件有两种方法:一种是添加事件句柄,一种是监听。
<video id="myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
</video>
// 监听方式
var videoEl = document.getElementById("myPlayer");
videoEl.addEventListener("play",video_playing);
接口事件
-
play
,当执行方法play()
时触发 -
playing
,正在播放时触发 -
pause
,当执行了方法pause()
时触发 -
timeupdate
,当播放位置被改变时触发 -
ended
,当播放结束后停止播放时触发 -
waiting
,在等待加载下一帧时触发 -
ratechange
,在当前播放速率改变时触发 -
volumechange
,在音量改变时触发 -
canplay
,以当前播放速率需要缓冲时触发 -
canplaythrough
,以当前播放速率不需要缓冲时触发 -
durationchange
,当播放时长改变时触发 -
loadstart
,当浏览器开始在网上寻找数据时触发 -
progress
,当浏览器正在获取媒体文件时触发 -
suspend
,当浏览器暂停获取媒体文件,且文件获取并不是正常结束时触发 -
abort
,当中止获取媒体数据时触发 -
error
,在获取媒体过程中出错时触发 -
emptied
,当所在网络变为初始化状态时触发 -
stalled
,在浏览器尝试获取媒体数据失败时触发 -
seeking
,在浏览器正在请求数据时触发 -
seeded
,在浏览器停止请求数据时触发
定义全局的视频对象
代码如下:
<script type="text/javascript">
// 定义全局视频对象
var videoEl = null;
// 网页加载完毕后,读取视频对象
window.addEventListener("load", function() {
videoEl = document.getElementById("myPlayer")
});
</script>
添加进度显示功能
代码如下:
<script type="text/javascript">
function Progress() {
var el = document.getElementById("progress");
el.style.width = (videoEl.currentTime/videoEl.duration)*720 + "px"
document.getElementById("info").innerHTML = s2time(videoEl.currentTime) + "/" + s2time(videoEl.duration);
}
function s2time(s) {
var m = parseFloat(s/60).toFixed(0);
s = parseFloat(s%60).toFixed(0);
return (m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
}
window.addEventListener("load",function(){videoEl.addEventListener("timeupdate",Progress)});
window.addEventListener("load",Progress)
添加静音和调节音量的功能
消除静音videoEl.muted=false
;静音效果videoEl.muted=true
;videoEl.volume=e.value;
修改音量的值。
添加慢进和快进功能
videoEl.playbackRate-=0.2;
videoEl.playbackRate-=1;
// 显示播放速率
document.getElementById("rate").innerHTML=fps2fps(videoEl.playbackRate);