全部标签
写点什么
开源云计算行业资讯玩转写作平台算法Python人工智能区块链Linux前端个人成长面试架构师编程企业动态新基建敏捷安全读书笔记高效工作团队管理创业活动专区生涯规划知识管理运维产品经理 查看更多

必学必会 - 音频和视频

用户头像
魔王哪吒
关注
发布于: 2021 年 02 月 28 日
必学必会-音频和视频

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



每天学习编程，让你离梦想更新一步，感谢不负每一份热爱编程的程序员，不论知识点多么奇葩，和我一起，让那一颗四处流荡的心定下来，一直走下去，加油，2021加油！欢迎关注加我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。


  1. src属性用于指定媒体文件的url地址

  2. type属性用于指定媒体文件的类型，属性值为媒体文件的MIME类型，该属性值还可以通过codes参数指定编码格式


`audio`和`video`特性和属性


元素的标签特性


  1. src，源文件特性，用于指定媒体文件的url地址

  2. autoplay，自动播放特性，表示媒体文件加载后自动播放。


<video src="resources/video.mp4" autoplay></video>
复制代码


  1. controls，控制条特性，表示为视频或音频添加自带的播放控制条。


<video src="resources/video.mp4" controls></video>
复制代码


  1. loop，循环特性，表示音频或视频循环播放。


<video src="resources/video.mp4" controls loop></video>
复制代码


  1. preload，预加载特性，表示页面加载完成后如何加载视频数据。


  • none表示不进行预加载

  • metadata表示只加载媒体文件的元数据

  • auto表示加载全部视频或音频，默认值为auto


<video src="resources/video.mp4" controls preload="auto"></video>
复制代码


  1. poster是video元素独有的特性，替代内容属性，用于指定一副替代图片的url地址，当视频不可以用时，会显示该替代图片。


<video src="resources/video.mp4" controls poster="images/none.jpg"</video>
复制代码


  1. width和height，video元素独有的特性，用于指定视频的宽度和高度


<video src="resources/video.mp4" width="600" height="200" controls></video>
复制代码


接口属性


  1. currentSrc，只读，获取当前正在播放或已加载的媒体文件的url地址

  2. videoWidth，只读，video元素特有属性，获取视频原始的宽度

  3. videoHeight，只读，video元素特有属性，获取视频原始的高度

  4. currentTime，获取或设置当前媒体播放位置的时间点

  5. startTime，只读，获取当前媒体播放的开始时间

  6. duration，只读，获取整个媒体文件的播放时长

  7. volume，获取或设置媒体文件播放时的音量，取值范围在0.0到0.1之间

  8. muted，获取或设置媒体文件播放时是否静音。true表示静音，false表示消除静音

  9. ended，只读，如果媒体文件已经播放完毕则返回true，否则返回false

  10. error，只读，读取媒体文件的错误代码

  11. played，只读，获取已播放媒体的TimesRanges对象，该对象内容包括已播放部分的开始时间和结束时间。

  12. paused，只读，如果媒体文件当前是暂停或未播放则返回true，否则返回false

  13. seeking，只读，获取浏览器是否正在请求媒体数据

  14. seekable，只读，获取媒体资源已请求的TimesRanges对象，该对象内容包括已请求部分的开始时间和结束时间

  15. networkState，只读，获取媒体资源的加载状态

  16. buffered，只读，获取本地缓存的媒体数据的TimesRanges对象

  17. readyState，只读，获取当前媒体播放的就绪状态

  18. playbackRate，获取或设置媒体当前的播放速率

  19. 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`接口方法


接口方法


  1. load()，加载媒体文件，为播放做准备。

  2. play()，播放媒体文件。

  3. pause()，暂停播放媒体文件。

  4. 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);
复制代码


接口事件


  1. play，当执行方法play()时触发

  2. playing，正在播放时触发

  3. pause，当执行了方法pause()时触发

  4. timeupdate，当播放位置被改变时触发

  5. ended，当播放结束后停止播放时触发

  6. waiting，在等待加载下一帧时触发

  7. ratechange，在当前播放速率改变时触发

  8. volumechange，在音量改变时触发

  9. canplay，以当前播放速率需要缓冲时触发

  10. canplaythrough，以当前播放速率不需要缓冲时触发

  11. durationchange，当播放时长改变时触发

  12. loadstart，当浏览器开始在网上寻找数据时触发

  13. progress，当浏览器正在获取媒体文件时触发

  14. suspend，当浏览器暂停获取媒体文件，且文件获取并不是正常结束时触发

  15. abort，当中止获取媒体数据时触发

  16. error，在获取媒体过程中出错时触发

  17. emptied，当所在网络变为初始化状态时触发

  18. stalled，在浏览器尝试获取媒体数据失败时触发

  19. seeking，在浏览器正在请求数据时触发

  20. 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(达达前端)，感谢各位人才的：点赞、收藏和评论，我们下期见！(如本文内容有地方讲解有误，欢迎指出☞谢谢，一起学习了)

我们下期见！



文章持续更新，可以微信搜一搜「 程序员哆啦 A 梦 」第一时间阅读，回复【资料】有我准备的一线大厂资料，本文 http://www.dadaqianduan.cn/#/ 已经收录



github收录，欢迎Star：https://github.com/webVueBlog/WebFamily

划线
评论
复制
发布于: 2021 年 02 月 28 日阅读数: 20

版权声明: 本文为 InfoQ 作者【魔王哪吒】的原创文章。

原文链接:【http://xie.infoq.cn/article/1d1422ae4ce6c34fbd8c395cb】。未经作者许可，禁止转载。

html5前端28天写作2月春节不断更
用户头像

魔王哪吒

关注

微信搜：程序员哆啦A梦 2018.05.08 加入

面向JavaScript爱好人员提供：Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular等一系列教程和经验分享。 博客首发：http://www.dadaqianduan.cn/#/

评论

发布
暂无评论
Copyright © 2021, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
必学必会-音频和视频