您现在的位置是:首页 > 前端学习 > Web前端Web前端

音频和视频(第七节)

第十三双眼睛2019-11-08【Web前端】人已围观

简介在HTML5之前,在线的视频和音频都是节主FLASH或者第三方工具实现的,现在的HTML5也支持了这方面的功能,在一个支持HTML5的浏览器中,不需要安装任何插件就能播放视频和音频,原生的支持视频和音频,为HTML5注入了巨大的发展潜力,本章将介绍两个重要的元素,audio,video,分别用于实现音频和视频,又称为多媒体,对于这两个元素,HTML5为开发者提供了标准的,集成的API
本章的重要知识点如下:
1AUDTIO和VIDEO的基础知识
2HTML5中的AUDIO和VIDEO
3网页中的音

HTML5对多媒体的支持是顺势发展,只是目前还没有规范的很完整,各种浏览器的支持,差别也很大,如果深入理解HTML5的AUDIO和VIDEO元素,有必要对其相关的多媒体技术有一定的了解。

在线视频的发展
早在2000年,在线视频都是借助第三方工具实现的,如realPlayer和quicktime,但是他们会存在隐私保护和兼容性问题,HTML的发展与浏览器息息相关,当微软赢得了2001年的浏览器大战时,即停止了对IE浏览器的改进,而w3c组织也声明了HTML规范已经过时,转而关注XHTML和XHTML2,严谨的数据规范和验证,弱化了HTML本身的功能,此时,没有人会认为在HTML中实现视频是个好主意。
然而根据实际需要,开发人员仍然需要在网页上实现多媒体功能,进而转向flash的改进,在2002年,为了满足使用flash video开发人员的需要引入了sorenson spark,在2003年,该公司使用了VP6编解码器引入了外部视频FLV格式,在当时这是非常高质量的也是高压缩的,由此使用flash开发的在线视频有了近10年的发展,flash player的安装库也变得越来越大,flash video几乎没有缺点,称为了web标准。

仍然存在的问题
如果在读者的网站上放置一个flash视频,通常需要对adobe actionscript和转悠工具有一定的了解,才能编码视频和创建播放器控件,一个flash对象的嵌入代码已经存在很多年了,如下所示:是一个实现视频播放的代码,

这种代码,不兼容IE浏览器,如果要兼容IE浏览器,要加入同样多的代码,这样的实现方式缺点是代码较长,最重要的是需要安装FLASH插件,并非所有的浏览器都有对应的插件。

HTML5视频简介
在HTML5中,不但不需要安装其他插件,而且实现还很简单,播放一个视频,只需要一行代码:如下:
<video src="..." autoplay><video>

多媒体术语
要准备开发视频,读者需要明白很多多媒体方面的术语,对于音频和视频,都会涉及 两方面的概念,文件格式和编码器。
1视频文件格式
不论是音频还是视频,都是一个压缩的容器文件,关于视频文件,包含了音频轨道,视频轨道和一些元数据(封面,标题,字幕),不同格式的视频文件,所属的视频容器也不一样,目前比较流行的视频格式如下:
audio video interleaved(.avi)
flash video (.flv)
mpeg4(.mp4)
matroska(.mkv)
ogg(.ogv)
音频和视频编解码器
编解码器是一些算法代码,用来处理视频,音频或者元数据的编码格式,对音频或视频文件进行编码,可使得文件压缩大小,方便再因特网上传输,因为是网络媒体发展方面,网络带宽是一个很大的发展瓶颈。以下是HTML5音频文件格式及各自的编解码器
mp3:使用ACC音频
wav:使用wav音频
ogg:使用oggvorbis音频
以下是HTML5视频文件格式及其各自的编解码器
MP4使用H.264视频,AAC音频
webm使用VP8视频,oggvorbis音频
ogg使用throra视频,oggvorbis音频
h.264编解码器被广泛采用,因此读者所使用的大多数编码软件都可以编码一个mp4视频,webm是新兴的,但是很多工具已经都可以使用,ogg是开源的,但是还没有广泛使用,因此只有少数几个工具可以使用。

功能缺陷及未来趋势
直到现在,仍然不存在完成的音频和视频标准,尽管HTML5提供了音频和视频的规范,但其中所涉及的内容还不够完善
1流式音频和视频
目前的HTML5中,还没有比特率切换标准,所以对视频的支持仅限于先全部加载完成再播放的方式,但流式媒体是比较理想的格式。

2跨资源的共享
HTML5的媒体受到HTTP跨资源共享的限制,HTML5针对跨资源的共享,提供了专门的规范,这种规范不仅仅限于音频和视频

3全屏控制
从安全角度来讲,浏览器中的脚本控制范围不会超出浏览器之外,如果需要控制全屏操作,可能还需要浏览器提供相应的支持。

4字幕支持
如果再HTML5中对音频或视频进行编程,可能还需要对字幕的控制,基于流行的字幕格式SRT的字幕支持规范仍在编写中,尚未完全纳入规范。

5编解码支持
使用HTML5媒体标签最大的缺点在于缺少通用的编解码的支持,随着时间的推移,最终会形成一个通用的,高效的编解码器,到时候多媒体应用形式比现在更加丰富。

audio元素是专门用来再网页中播放网络音频的,video元素是专门用来再网页中播放视频的,有了这两个元素,就不再需要其他任何插件了,只要浏览器支持HTML5就可以。HTML5为audio和video提供了专门的接口,包含了一系列的属性,方法,事件,这些接口,可以帮助我们完成针对音频和视频的操作,这两个元素再使用方法和形式上很类似

在页面中加入音频和视频
这两个元素的使用都比较简单,首先以audio元素为例,,只要指定audio标签属性src的值为一个音频文件的路径就可以了,如下所示。
<audio src=".....">您的浏览器不支持</audio>
通过这种方法可以把音频数据嵌入到网页上,如果浏览器不支持HTML5的audio元素,将会显示替代文字,您的浏览器不支持。
在网页中添加视频和audio相似,还可以设置video的尺寸,如下所示,
<video src="...." width="600" height="400">
您的浏览器不支持
</video>
使用source元素
由于各种浏览器对音频和视频的支持情况不同,为了能够在各种浏览器上都能正常使用,可以提供多个源文件,这个时候需要使用source标签,为audio元素或者video元素提供多个备用的文件,如下:
<audio src="...">
<source src="1.ogg" type="audio/ogg">
<source src="1.mp3" type="audio/mp3">
</audio>
从上面可以看出,我们使用source元素替代了audio元素或者video元素的标签属性src,这样,浏览器可以根据自己的支持能里,选择支持的文件进行播放

也可以使用脚本检测浏览器的支持情况,如下:
var support = !!document.createElement("audio").canPlayType();这段脚本会动态的创建audio元素,然后检查canPlayType函数是否存在,通过执行两次逻辑非运算符,将结果转化为布尔值,就可以确定音频对象是否创建成功,同样,video元素也可以这样检查。

audio和video的特性和属性
1元素的特性标签(attributes)
src:源文件特性,用于指定媒体文件的url地址
autoplay:自动播放特性,表示媒体文件加载后自动播放,该属性在标签中的使用方法如下:
<audio src="..." autoplay>
controls:控制条特性,表示为视频或者音频添加控制条,控制条中包含播放,暂停,进度条,进度时间,和音量控制,该标签在标签中的使用方法如下:
<audio src="..." controls>
loop:循环特性,表示音频或者视频循环播放,该属性在标签中的使用方法如下:
<audio src="..." loop>
preload:预加载特性,表示页面加载完成后,如何加载视频数据,该特性有三个值,none表示不进行预加载,metadata表示只加载媒体文件的元数据,auto表示加载全部视频或者音频。默认为auto,如果设置了auto属性,则忽略preload属性
poser:(video元素独有的属性),替代内容属性,用于指定一副替代图片的url地址,当视频不可用时,会显示该替代图片。
width和height:(video特有的属性),用于指定视频的高度和宽度。单位时像素。

2接口属性
currentSrc(只读):获取当前正在播放或已加载媒体文件的url
videoWidth:获取视频原始的宽度
videoHeight:获取视频原始的宽度
currentTime:获取/设置当前媒体播放位置的时间,单位时秒
startTime:只读,获取当前媒体播放的开始时间,通常是0
duration:只读,获取整个媒体文件的播放时长,单位,秒,如果无法获取,则返回NAN
volume:获取/设置媒体文件的播放音量,取值范围在0.0到0.1之间
muted:获取/设置媒体文件播放时是否静音,true为静音,false表示不静音
ended:只读,获取媒体文件当前是否已经播放完毕,完毕则返回true,没有完毕则返回false
played:只读,获取已播放媒体文件的timesranges对象,该对象内容包含已播放部分的开始时间和结束时间
paused:只读,如果媒体文件当前时暂停或者未播放,则返回true,否则返回false
error:只读,读取媒体文件的错误代码,正常情况下,error属性为null,有错误时,返回mediaerror对象code,code有4个状态值
MEDIA_ERR_ABORTED:值为1,中止,媒体资源在下载过程中,由于用户操作原因而被中止
MEDIA_ERR_NETWORK:值为2,网络中断,媒体资源可用,但下载出现网络错误而中断,
MEDIA_ERR_DECODE:值为3,解码错误,媒体资源可用,但是解码时发生错误
MEDIA_ERR_SRC_NOT_SUPPORTED:值为4,不支持格式,媒体格式不被支持。
seeking:只读,获取浏览器是否正在请求媒体数据,true表示正在请求,false表示停止请求
seekable:只读,获取媒体资源已请求的timesranges对象,该对象包含已请求部分的开始时间和结束时间,
networdstate:只读,获取媒体资源的加载状态,该状态有4个值
NETWORK_EMPTY:值为0,加载的初始状态
NETWORK_IDLE:值为1,已确定编码格式,但尚未建立网络连接
NETWORK_LOADING:值为2,媒体文件加载中
NETWORD_NO_SOURCE:值为3,没有支持的编码格式,不加载
buffered:只读,获取本地缓存的媒体数据的timesranges对象,可以是个数组
readyState:获取当前媒体播放的就绪状态,共有5个值,
HAVE_NOTING:值为0,还没有获取到媒体文件的任何信息
HAVE_METADATA:值为1,已获取到媒体文件的元数据
HAVE_CURRENT_DATA:值为2,已获取到媒体文件的元数据
HAVE_FUTURE_DATA:值为3,已获取到当前播放位置的数据,但没有下一帧的数据
HAVE_ENOUGH_DATA:值为4,已获取到足够多的媒体数据,可正常播放。
playbackrate:获取/设置媒体当前的播放速率
defaultPlaybackRate:获取/设置默认媒体的播放速率
接口属性的使用方法
下面通过一个简单的实例来演示接口属性的使用方法
在上面的例子中,首先通过脚本获取video对象的currentTime,加上600秒,后赋值给对象的currentTime属性,即可实现快进10分钟,由于currenttime属性是可读可写的,所以可以给它赋值,如果接口属性是只读属性,则只能获取属性,不能给该属性赋值。

audio和video的方法
1接口方法,
load(),加载媒体文件,为播放做准备,通常用于播放前的预加载,还会用于重新加载媒体文件,
play(),播放媒体文件,如果视频没有加载,则加载并播放,如果是暂停的,则变为播放,自动把pause属性变为false
pause(),暂停播放媒体文件,自动把pause属性变为true
canPlayType();测试浏览器是否支持指定的媒体类型,该方法的语法如下:canPlayType(<type>);该方法有3个返回值,
1空字符串,表示浏览器不支持指定的媒体类型
2maybe:表示浏览器可能支持指定的媒体类型
3probably:表示浏览器确定的支持指定的媒体类型

接口方法的使用
下面通过一个简单的实例来演示接口方法的使用。
在上面的例子中,设置两个按钮,分别控制视频的暂停与播放,播放按钮通过定义的play()函数执行视频接口的play(),暂停按钮通过定义的pause函数执行视频的接口方法pause()

audio和video的事件
HTML5还提供了一些列的接口事件,在使用video和audio元素读取或者播放媒体文件的时候,会触发一系列的事件,可以i用javascript来捕获这些事件,并作相应的处理。
1捕获事件的方式
捕获事件的两种方式,一种是添加句柄,一种是监听,在页面的audio或者video标签中添加事件句柄。如下:
<video id="" src="..." onplay="video_play"></video>
监听方式
var videoEl = document.getElementById("myPalyer");
videoEl .addEventListener("play",video_play);
play:当执行方法play时触发
playing:在在播放时触发
pause:执行方法pause时触发
timeupdate:当播放位置改变触发,可能是播放过程中的自然改变,也可能是人为改变
ended:播放结束或者停止播放时触发
waiting:在等待加载下一帧时触发
ratechange:在当前播放速率改变时触发
volumechange:在音量改变时触发
canplay:以当前播放速率,需要缓冲时触发
canplaythrough:以当前播放速率,不需要缓冲时触发
durationcahnge:当播放时长改变时触发
loadstart:当浏览器开始在网上寻找数据时触发
prograss:当浏览器正在获取媒体文件时触发
suspend:当浏览器暂停获取媒体文件时触发
abort:当中止获取媒体数据时触发,但这种中止不是有错误引起的,
error:在获取媒体文件过程中出错触发
emptied:当所在网络变为初始化状态时触发
stalled:浏览器尝试获取媒体数据失败时触发
loadedmetadata:在加载万媒体元数据时触发
loadeddata:加载完当前位置的媒体播放数据时触发
seeking:浏览器正在请求数据时触发
seeked:浏览器停止请求数据时触发

自定义播放工具条
audio和video都有一个默认的播放工具条,如果标签设置controls属性,该播放工具条就会显示出来,使用起来也非常方便,但是,对于设计者来说,千篇一律的风格,总会让人厌倦,本次我们就自己定义一个工具条。
本次的工具条,主要功能包括,播放/暂停,快进,慢进,前进,后退,静音,音量控制。其中播放和暂停是统一按钮,会根据播放的状态切换,快进和慢进会改变播放速度,工具条右边显示关于速率和时间进度的信息,上面还有一个进度条,以更加友好的显示进度条,
<video id="myPlayer" src="1.mp4">您的浏览器不支持</video>
<div id="controls">
    <span id="solw" class="h">慢进</span>
    <span id="play" class="h">播放/暂停</span>
    <span id="fast" class="h">快进</span>
    <span id="prev" class="h">后退</span>
    <span id="next" class="h">前进</span>
    <span id="muted" class="h">静音</span>
    <div id="volume" type="range" min="0" max="1" step="0.1" onChange="Volume(this)"></div>
</div>
定义全局的视频对象
为了方便调用视频对象,我们把视频对象定义为全局变量,如下代码。
<script>
var video=null;
window.addEventListener('load',function(){
videoEl = document.getElementById("myplayer");
});
</script>

添加播放/暂停,前进和后退功能
播放和暂停使用一个按钮,暂停时,播放功能有效,可点击播放视频,播放时,暂停功能有效,可点击暂停播放,前进和后退,仅仅是改变了currentTime属性的值
var video = document.getElementById("myPlayer");
function play(){
    video.play();
}

function back(){
    video.currentTime-=60;
}

function go(){
    video.currentTime+=60;
}
</script>

添加快进和慢进功能
慢进和快进功能是通过改变速率来实现的,默认速率为1,当速率小于1时,每次改变0.2的速率,当速率大于1时,每次改变的速率为1,速率改变后,会在播放工具中显示出来。
function slow(){
    video.playRate +=0.1;
}

function fast(){
    videoplayRate +=0.2;
}
添加静音功能和音量功能
静音时,音量为0,不静音时,音量还原为视频的音量,音量是通过拖动滑块来调整的,当拖动滑块时,即触发事件,修改视频的音量
function jinyin(){
    if(video.muted){
        video.muted=false;
    }else{
        video.muted=true;
    }
}

添加进度显示功能
网页加载完成后,执行进度处理函数,并把进度处理函数添加至视频对象的timeupdate事件中,以便能完成实时更新进度信息。



 

Tags:HTML   HTML网页

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计64篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们