注册|登录

联系电话:024-31891684  13390130939
沈阳软件公司--沈阳软件定制

沈阳软件开发_沈阳软件公司_沈阳软件定制/软件/最新技术

Latest technology最新技术

HTML中的音频和视频

浏览量:2325

  1. HTML5的audio和video元素代表这音频你和视频。这里有两个概念需要先理解一下。
      视频容器:这里有个封装的概念。封装了音频轨道、视频轨道、元数据(视频封面、标题、子标题、字幕)。主流视频容器支持以下格式的视频文件:.avi、.flv、.mp4、.mkv和.ogg。
      音频和视频编解码器:一组用来对音频和视频编码、解码以便能正常播放的算法。主流音频编解码器:AAC、MPEG-3和Ogg Vorbis。主流视频编解码器:H.264、VP8和Ogg Theora。
    目前除IE以外的主流浏览器都支持audio和video。
  2. 使用HTML5audio和video的优势:
      浏览器自带,因而无需安装。
      更容易通过脚本来控制和播放内容。
    缺点是:缺少通用编解码器支持。
  3. 通过脚本进行兼容性检测。

var hasVideo=!!(document.createElement('vedio').canPlayType);

这段脚本会动态创建vedio元素,然后检查canPlayType()函数是否存在。通过“!!”将结果转换为布尔值。如果检测结果是当前浏览器不支持该元素,则需要触发另外一套脚本向页面中引入媒体标签。可以把Flash等插件方式播放放到<video>备选代码</video>中。

<video src="video.ogg">

<object data="videoplayer.swf"type="application/x-shockwave-flash">

<param name="movie"value="video.swf"/>

</object>

</video>

  1. 如果不使用contros特性怎么让媒体文件正常播放呢?可以设置成这样:<audio autoplay></audio>,效果是当媒体文件加载完成后自动播放。不过大部分用户对此比较反感。还有一种比较好的方式是用js控制播放。
    (1)常用控制函数
      load():通常不必调用。除非是动态生成的元素,用来在播放前预加载。
      play():除非音频/视频已经暂停在其他位置,否则重头播放。
      pause():暂停播放。
      canPlayType():测试video元素是否支持给定MIME类型的文件。下面的代码可以快速判断是否支持fooType类型播放。      

1varsupportsFoolVideo=!!(document.createElement('video').canPlayType('fooType'));

(2)部分只读特性
  duration:整个媒体文件的播放时长(s),无法获取返回NaN。
  paused:如果媒体文件当前被暂停,返回true,否则返回false。
  ended:如果媒体文件已经播放完毕,返回true。
  startTime:返回最早的播放时间,一般是0.0,除非是缓冲过的媒体文件,并且一部分内容已经不再缓冲区。
  error:在发生错误的时候返回错误代码。
  currentSrc:以字符串的形式返回当前正在播放或已经加载的文件。
(3)部分可被脚本修改并直接影响播放的媒体元素特性
  autoplay:将媒体文件设置为创建后自动播放,或者查询是否已经设置为autoplay。
  loop:设置为true表示循环播放。或者查询。
  currentTime:返回从开始播放到现在所用的时间。在播放过程中,设置currentTime来进行搜索,并定位到媒体文件的特定位置。
  controls:显示或隐藏用户控制界面,或者查询。
  volume:从0.0到1.0之间设置音量大小,或者查询。
  muted:设置或消除静音,或者查询。
  autobuffer:通知播放器在媒体文件开始播放前,是否进行缓冲加载。如果媒体文件已经设置了autoplay则忽略此设置。
video比audio多了一些特性:
  poster:在视频加载完成之前,代表视频内容图片URL地址。类似于电影海报。该特性可读写。 
  width、height:读写视频尺寸。
  videoWidth、videoHeight:返回视频的固有或自适应宽度和高度。只读。
  除了这些之外,video还有一个audio不支持的特性:抓取图像帧。这里要与Canvas一起使用。使用drawImage()方法。

CRM定制 办公OA找沈阳易势科技有限公司

沈阳团购网|营口网站制作|沈阳软件公司|软件定制|网站建设|加盟易势|提交问题