必学必会-音频和视频

码农天地 -
必学必会-音频和视频

哪吒人生信条:如果你所学的东西 处于喜欢 才会有强大的动力支撑。

把你的前端拿捏得死死的,每天学习得爽爽的,关注这个不一样的程序员,如果你所学的东西 处于喜欢 才会有强大的动力支撑。

感谢不负每一份热爱前端的程序员,不论前端技能有多奇葩,欢迎关注加我入群vx:xiaoda0423

前言

希望可以通过这篇文章,能够给你得到帮助。(感谢一键三连)

学习深入理解HTML5audiovideo

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,Oggvideo元素支持的格式MP4,WebM,Ogg

audio元素是专门用于在网页中播放网络音频的video元素是专门用于在网页中播放视频的

HTML5audiovideo元素提供的接口包含了一系列的属性,方法和事件,这些接口可以帮助开发完成对音频和视频的操作。

那么如何在页面中添加音频和视频呢?

音频

<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元素替代了audiovideo的标签属性srcsrc属性用于指定媒体文件的url地址type属性用于指定媒体文件的类型,属性值为媒体文件的MIME类型,该属性值还可以通过codes参数指定编码格式audiovideo特性和属性元素的标签特性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>
postervideo元素独有的特性,替代内容属性,用于指定一副替代图片的url地址,当视频不可以用时,会显示该替代图片。
<video src=resources/video.mp4 controls poster="images/none.jpg"</video>
widthheightvideo元素独有的特性,用于指定视频的宽度和高度
<video src=resources/video.mp4 width=600 height=200 controls></video>
接口属性currentSrc,只读,获取当前正在播放或已加载的媒体文件的url地址videoWidth,只读,video元素特有属性,获取视频原始的宽度videoHeight,只读,video元素特有属性,获取视频原始的高度currentTime,获取或设置当前媒体播放位置的时间点startTime,只读,获取当前媒体播放的开始时间duration,只读,获取整个媒体文件的播放时长volume,获取或设置媒体文件播放时的音量,取值范围在0.00.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>
audiovideo接口方法接口方法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>
audiovideo事件捕获事件的方式

捕获事件有两种方法:一种是添加事件句柄,一种是监听。

<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=truevideoEl.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

特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。
上一篇: npm源管理

Tags 标签

加个好友,技术交流

1628738909466805.jpg