当前位置:首页 > 开发 > Web前端 > 前端 > 正文

第三章 音频和视频

发表于: 2012-03-07   作者:bsr1983   来源:转载   浏览次数:
摘要: 音频和视频的编码/解码器是一组算法,用来对一段特定的音频或视频流进行编码和解码,以便音频和视频能够播放。原始的媒体文件体积非常大,假如不对其进行编码,那么构成一段视频和音频的数据可能会非常庞大,以至于在因特网上传播需耗费无法忍受的时间。若没有解码器的话,接收方就不能把编码过的数据重组为原始的媒体数据。编解码器可以读懂特定的容器格式,并且对其中的音频轨道和视频轨道解码。 3.2.2 

音频和视频的编码/解码器是一组算法,用来对一段特定的音频或视频流进行编码和解码,以便音频和视频能够播放。原始的媒体文件体积非常大,假如不对其进行编码,那么构成一段视频和音频的数据可能会非常庞大,以至于在因特网上传播需耗费无法忍受的时间。若没有解码器的话,接收方就不能把编码过的数据重组为原始的媒体数据。编解码器可以读懂特定的容器格式,并且对其中的音频轨道和视频轨道解码。

3.2.2 理解媒体元素

1、基本操作:声明媒体元素

<audio controls src="Adele-Set Fire To The Rain.mp3">

您所使用的浏览器不支持HTML5 audio

</audio>

代码中的controls 特性是告诉浏览器显示通用的用户控件,包括开始、停止、跳播以及音量控制。如果不指定controls属性,用户将无法播放页面上的音频。

2、使用source元素。

最简单的情况下,src属性直接指向媒体文件就可以了,但是,万一浏览器不支持相关容器或者编码器呢?这就需要用到备用声明了。备用声明中可以包含多种来源,浏览器可以从这么多的来源中进行选择:

<audio controls>

<source  src="Adele-Set Fire To The Rain.mp3" >

<source  src="Adele-Set Fire To The Rain.ogg" >

</audio>

对于来源,浏览器会按照声明顺序判断,如果支持的不止一种,那么浏览器会选择支持的第一个来源。

3、媒体的控制

在audio元素或video元素中通过设置特性autoplay,不需要任何用户交互,音频或视频文件就会在加载完成后自动播放。

表3-3 常用的控制函数

函数

动作

load()

加载音频/视频文件,为播放做准备,通常情况下不必调用,除非是动态生成的元素。用来在播放前预加载。

play()

加载(有必要的话)并播放音频/视频文件。除非音频/视频已经暂停在其他位置了,否则默认从头开始播放

pause()

暂停处于播放状态的音频/视频文件

canPlayType(type)

测试video元素是否支持给定MIME类型的文件

表3-4 只读的媒体特性

只读特性

duration

整个媒体文件的播放时长,以s为单位。如果无法获取时长,则返回NaN

paused

如果媒体文件当前被暂停,则返回true。如果还未开始播放,则返回false。

ended

如果媒体文件已经播放完毕,则返回true

startTime

返回最早的播放起始时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不在缓冲区

error

在发生了错误的情况下返回的错误代码

currentSrc

以字符串形式返回当前正在播放或已加载的文件。对应于浏览器在source元素中选择的文件。

表3-5 可脚本控制的特性值

特性

autoplay

将媒体文件设置为创建后自动播放,或者查询是否已设置为autoplay

loop

如果媒体文件播放完毕后能重新播放则返回true,或者将媒体文件设置为循环播放(或者不循环播放)

currentTime

以s为单位返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,并定位到媒体文件的特定位置

controls

显示或隐藏用户控制界面,或者查询用户控制界面当前是否可见

volume

在0.0到1.0之间设置音频音量的相对值,或者查询当前音量的相对值。

muted

为音频文件设置静音或者消除静音,或者渐层当前是否为静音

autobuffer

通知播放器在媒体文件开始播放前,是否进行缓冲加载。如果媒体文件已经设置为autoplay,则忽略测特性。

3.2.3 使用audio元素

3.2.4 使用video

HTML5 video元素同audio元素非常类似,只是比audio元素多了一些特性。

表3-6 video元素的额外特性

特性

poster

在视频加载完成之前,代表视频内容的图片的URL地址,可以想象一下“电影海报”。该特性不仅可读,而且可以修改,以便更换图片

width、height

读取或设置显示尺寸。如果设置的宽度与视频本身大小不匹配,可能导致居中显示,上下或左右可能出现黑色条状区域。

videoWidth、videoHeight

返回视频固有的或自适应的宽度和高度。只读

video元素还有一个audio元素不支持的关键特性:可被HTML5 Canvas的函数调用。

提示 当canvas使用视频作为绘制来源时,画出来的只是当前播放的帧。

第三章 音频和视频

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
Javascript -- HTML5 Video&Audio Progress http://kaisuo1010.blog.163.com/blog/static/649066872
本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处! 上次讲解了MediaPlayer播放网络音频
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti
由于最近项目需要在winform中有播放视频文件功能,相继在网上找了些资料,现在总结一下: 需要播放
1.打开http://www.ffmpeg.org/,点击Download 2.进入http://www.ffmpeg.org/download.html,如果是w
最近由于做山寨QQ视频聊天的需要,做了一个视频通信窗口组件。现在分享一下供大家学习…… 原创文章
转自: http://mzhx-com.iteye.com/blog/1098698 最近由于做山寨QQ视频聊天的需要,做了一个视频通信
摘要:   在HTML5出现之前,web媒体大部分通过Flash来实现。这种方式造成了文件大加载慢,影响网
< ![CDATA[ 1.利用HTML5页面 访问API 接口。 2.API接口 移步返回流 3.客户端接收播放,接收一点
1、我们先来看看视频或视频来源: SD卡、手机本身的存储(例如应用本身在res/raw中携带的多媒体文件
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号