欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5实战与剖析之媒体元素(4、检测编解码器的支持和Audio构造函数)

程序员文章站 2024-01-22 18:08:34
  html5媒体元素检测编解码器的支持情况   虽然媒体元素可以实现音频和视频功能,但是并不是所有都支持video标签和audio标签的所有编解码器,这意味着开发人员必须提供很多歌媒体...



  html5媒体元素检测编解码器的支持情况


  虽然媒体元素可以实现音频和视频功能,但是并不是所有都支持video标签和audio标签的所有编解码器,这意味着开发人员必须提供很多歌媒体来源。在javascript api中能够检测浏览器是否支持某种格式和编解码器。这两个媒体元素都有一个canplaytype()方法,该方法接收一种格式/编解码器字符串,返回”probably”、”maybe”或者””(空字符串)。空字符串是假值,而”probably”和”maybe”都是真值,所以if条件测试中可以转成true,所以在if中可以作为条件进行判断。检测格式/编解码器的方法如下


  javascript代码


if(audio.canplaytype("audio/mpeg")){
	//进一步编写
}


  如果给canplaytype()传入了一种mime类型,则返回值很可能是”maybe”或者空字符串。这是因为媒体文件本身只不过是音频或者视频的一个容器,真正决定文件能否播放的还是编码格式。在同时传入mime类型和编码器的情况下,可能性就会增加,返回的字符串会变成”probably”。小例子如下


  html代码





  javascript代码


var audio = document.getelementbyid("myaudio");

//很可能"maybe"
if(audio.canplaytype("audio/mpeg")){
	//进一步编写
}

//可能是"probably"
if(audio.canplaytype("audio/ogg; codecs=\"vorbis\"")){
	//进一步编写
}


  编解码器必须用引号引起来才行。下面就为大家介绍一下已经得到支持的音频格式和编解码器。


  aac格式:字符串audio/mp4,codecs=”mp4a.40.2”;支持的浏览器:ie9+、safari 4+和ios版safari

  mp3格式:字符串audio/mpeg;支持的浏览器:ie9+、chrome

  vorbis格式:字符串audio/ogg,codecs=”vorbis”;支持的浏览器:firefox 3.5+、chrome、opera 10.5+

  wav格式:字符串audio/wav,codecs=”1”;支持的浏览器:firefox 3.5+、opera 10.5+、chrome


  下面是用canplaytype()来检测视频格式编解码器。


  h.264格式:字符串video/mp4,codecs=”a1.42e01e,mp4a.40.2”;支持的浏览器:ie9+、safari 4+、ios版safari、android版webkit

  theora:字符串video/ogg,codecs=”theora”;支持的浏览器:firefox 3.5+、opera 10.5+、chrome

  webm:video/webm,codecs=”vp8,vorbis”;支持的浏览器:firefox 4+、opera 10.6+、chrome



  html5媒体元素之audio构造函数



  在原生的javascript中,有一个构造函数audio,可以在任何时候播放音频。从都是dom元素的角度出发,audio对象和image对象很类似,但是audio对象不用像image对象那样必须插入到文档中。只要创建一个新实例,传入音频源文件即可。小例子如下


  javascript代码


var audio = new audio("meng.mp3");
audio.addeventlistener('canplaythrough',function(event){
	audio.play();
}, false);	


  创建新的audio实例即可开始下载指定的文件。下载完成后,调用play()方法就可以播放音频。在ios中,调用play()时会弹出一个对话框,得到用户的允许后才能播放。如果想在一段音频播放后再播放另一端音频,必须在onfinish事件处理程序中调用play()方法。

  html5实战与剖析之媒体元素(4、检测编解码器的支持和audio构造函数)就为大家介绍完了。如果需要完全模拟音频或者视频,就可以不用在页面中建立标签,直接创建audio对象即可大大方便了很多。更多有关html5的相关东西敬请关注梦龙小站html5的相关更新。