关于html5:必学必会音频和视频

41次阅读

共计 5412 个字符,预计需要花费 14 分钟才能阅读完成。

哪吒人生信条:如果你所学的货色 处于喜爱 才会有弱小的能源撑持。

把你的前端拿捏得死死的,每天学习得爽爽的,关注这个不一样的程序员,如果你所学的货色 处于喜爱 才会有弱小的能源撑持。

感激不负每一份酷爱前端的程序员,不管前端技能有多奇葩,欢送关注加我入群 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的标签属性src

  1. src属性用于指定媒体文件的 url 地址
  2. type属性用于指定媒体文件的类型,属性值为媒体文件的 MIME 类型,该属性值还能够通过 codes 参数指定编码格局

audiovideo 个性和属性

元素的标签个性

  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. postervideo 元素独有的个性,代替内容属性,用于指定一副代替图片的 url 地址,当视频不能够用时,会显示该代替图片。
<video src="resources/video.mp4" controls poster="images/none.jpg"</video>
  1. widthheightvideo 元素独有的个性,用于指定视频的宽度和高度
<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.00.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>

audiovideo 接口办法

接口办法

  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>

audiovideo 事件

捕捉事件的形式

捕捉事件有两种办法:一种是增加事件句柄,一种是监听。

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

正文完
 0