哪吒人生信条:若是你所学的东西 处于喜欢 才会有强大的动力支撑。javascript
把你的前端拿捏得死死的,天天学习得爽爽的,关注这个不同的程序员,若是你所学的东西 处于喜欢 才会有强大的动力支撑。感谢不负每一份热爱前端的程序员,不论前端技能有多奇葩,欢迎关注加我入群vx:xiaoda0423html
但愿能够经过这篇文章,可以给你获得帮助。(感谢一键三连)前端
学习深刻理解HTML5
的audio
和video
。java
HTML5
视频概述在HTML5
播放一个视频,很简单,只须要一行代码:git
<video src="resources/dadaqianduan.mp4" autoplay></video>
了解视频文件格式:程序员
Audio Video InterLeaved .avi Flash Video .flv MPEG-4 .mp4 Matroska .mkv Ogg .ogv
音频和视频编解码器github
编解码器能够理解为一些算法代码,用于处理视频,音频或者其元数据的编码格式。对音频或视频文件进行编码,可以使得文件大大缩小,便于在因特网上传输。web
音频编解码器:算法
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);
我是Jeskson(达达前端),感谢各位人才的:点赞、收藏和评论,咱们下期见!(如本文内容有地方讲解有误,欢迎指出☞谢谢,一块儿学习了)
文章持续更新,本文 http://www.dadaqianduan.cn/#/ 已经收录github收录,欢迎Star:https://github.com/webVueBlog/WebFamily