共计 5412 个字符，预计需要花费 14 分钟才能阅读完成。
哪吒人生信条：如果你所学的货色 处于喜爱 才会有弱小的能源撑持。
把你的前端拿捏得死死的，每天学习得爽爽的，关注这个不一样的程序员，如果你所学的货色 处于喜爱 才会有弱小的能源撑持。
感激不负每一份酷爱前端的程序员，不管前端技能有多奇葩，欢送关注加我入群 vx:xiaoda0423
前言
心愿能够通过这篇文章，可能给你失去帮忙。(感激一键三连)
学习深刻了解 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，否则返回falseerror，只读，读取媒体文件的错误代码played，只读，获取已播放媒体的TimesRanges对象，该对象内容包含已播放局部的开始工夫和完结工夫。paused，只读，如果媒体文件以后是暂停或未播放则返回true，否则返回falseseeking，只读，获取浏览器是否正在申请媒体数据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);点赞、珍藏和评论
我是 Jeskson(达达前端)，感激各位人才的：点赞、珍藏和评论，咱们下期见！(如本文内容有中央解说有误，欢送指出☞谢谢，一起学习了)
咱们下期见！
文章继续更新，本文 http://www.dadaqianduan.cn/#/ 曾经收录
github 收录，欢送 Star：https://github.com/webVueBlog/WebFamily
正文完