音频和视频
共 1282字，需浏览 3分钟
· 2021-01-16
哪吒人生信条：如果你所学的东西 处于喜欢 才会有强大的动力支撑。
把你的前端拿捏得死死的，每天学习得爽爽的，微信搜索【程序员哆啦A梦】关注这个不一样的程序员，如果你所学的东西 处于喜欢 才会有强大的动力支撑。
感谢不负每一份热爱前端的程序员，不论前端技能有多奇葩，欢迎关注加我入群vx:xiaoda0423
前言
希望可以通过这篇文章，能够给你得到帮助。(感谢一键三连)
学习深入理解HTML5的audio和video。
HTML5视频概述
在HTML5播放一个视频，很简单，只需要一行代码：
"resources/dadaqianduan.mp4" autoplay>
了解多媒体术语
了解视频文件格式：
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元素提供的接口包含了一系列的属性，方法和事件，这些接口可以帮助开发完成对音频和视频的操作。
那么如何在页面中添加音频和视频呢？
音频
"resources/audio.mp3">
视频
"resources/video.mp4" width="600" height="200">
使用source元素
因为各种浏览器对音频和视频的编解码器的支持不一样，为了能够在各种浏览器中正常使用，可以提供多个源文件。
"resources/audio.mp3">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
"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">
使用
source元素替代了audio或video的标签属性src。
src属性用于指定媒体文件的url地址type属性用于指定媒体文件的类型，属性值为媒体文件的MIME类型，该属性值还可以通过codes参数指定编码格式
audio和video特性和属性
元素的标签特性
src，源文件特性，用于指定媒体文件的url地址autoplay，自动播放特性，表示媒体文件加载后自动播放。
"resources/video.mp4" autoplay>
controls，控制条特性，表示为视频或音频添加自带的播放控制条。
"resources/video.mp4" controls>
loop，循环特性，表示音频或视频循环播放。
"resources/video.mp4" controls loop>
preload，预加载特性，表示页面加载完成后如何加载视频数据。
none表示不进行预加载metadata表示只加载媒体文件的元数据auto表示加载全部视频或音频，默认值为auto
"resources/video.mp4" controls preload="auto">
poster是video元素独有的特性，替代内容属性，用于指定一副替代图片的url地址，当视频不可以用时，会显示该替代图片。
"resources/video.mp4" controls poster="images/none.jpg"
width和height，video元素独有的特性，用于指定视频的宽度和高度
"resources/video.mp4" width="600" height="200" controls>
接口属性
currentSrc，只读，获取当前正在播放或已加载的媒体文件的url地址videoWidth，只读，video元素特有属性，获取视频原始的宽度videoHeight，只读，video元素特有属性，获取视频原始的高度currentTime，获取或设置当前媒体播放位置的时间点startTime，只读，获取当前媒体播放的开始时间duration，只读，获取整个媒体文件的播放时长volume，获取或设置媒体文件播放时的音量，取值范围在0.0到0.1之间muted，获取或设置媒体文件播放时是否静音。true表示静音，false表示消除静音ended，只读，如果媒体文件已经播放完毕则返回true，否则返回falseerror，只读，读取媒体文件的错误代码played，只读，获取已播放媒体的TimesRanges对象，该对象内容包括已播放部分的开始时间和结束时间。paused，只读，如果媒体文件当前是暂停或未播放则返回true，否则返回falseseeking，只读，获取浏览器是否正在请求媒体数据seekable，只读，获取媒体资源已请求的TimesRanges对象，该对象内容包括已请求部分的开始时间和结束时间networkState，只读，获取媒体资源的加载状态buffered，只读，获取本地缓存的媒体数据的TimesRanges对象readyState，只读，获取当前媒体播放的就绪状态playbackRate，获取或设置媒体当前的播放速率defaultPlaybackRate，获取或设置媒体默认的播放速率
视频播放的快进
"utf-8">
视频播放时的快进
"myPlayer" src="resources/video.mp4" width="600" height="200" controls>
type="button" value="快进" onclick="Forward()"/>
audio和video接口方法
接口方法
load()，加载媒体文件，为播放做准备。play()，播放媒体文件。pause()，暂停播放媒体文件。canPlayType()，测试浏览器是否支持指定的媒体类型。
代码示例使用接口：
"utf-8">
播放与暂停
"myPlayer" width="600">
<source src="resources/video.mp4" type="video/mp4">
type="button" value="播放" onclick="Play()"/>
type="button" value="暂停" onclick="Pause()"/>
audio和video事件
捕获事件的方式
捕获事件有两种方法：一种是添加事件句柄，一种是监听。
"myPlayer" src="resources/video.mp4" width="500" onplay="video_playing()">
// 监听方式
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，在浏览器停止请求数据时触发
定义全局的视频对象
代码如下：
添加进度显示功能
代码如下：
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);
点赞、收藏和评论
我是Jeskson(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)
我们下期见！
文章持续更新，可以微信搜一搜「 程序员哆啦A梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/#/ 已经收录
github收录，欢迎Star：https://github.com/webVueBlog/WebFamily