10 09/2014

html5 audio video 的几个问题

最后更新: Wed Sep 10 2014 12:36:06 GMT+0800

autoplay

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls autoplay>
</video>

注意：audoplay 只要“有”就会自动播放。即使 autoplay=”false” ，其实还是 autoplay=”true”！

autobuffer

以后没有啦，将会用 preload 代替！

chrome js 播放只能播放一次

a=$('audio')[0];if(window.chrome){a.load();}a.play();

没有 jquery

var v = document.getElementsByTagName("video")[0];
if(window.chrome){v.load();}
v.play();

文件格式






































BrowserMP3WavOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxNO
Update: Firefox 21 running on Windows 7, Windows 8,
Windows Vista, and Android now supports MP3		YESYES
SafariYESYESNO
OperaNOYESYES

检测浏览器支持

var audioTagSupport = !!(document.createElement('audio').canPlayType);

具体检测某个格式

var myAudio = document.createElement('audio'); 

if (myAudio.canPlayType) {

   // Currently canPlayType(type) returns: "", "maybe" or "probably" 

   var canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
   var canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
}

停止下载

仅仅 pause() 不能停止下载。

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

www mime type

AddType audio/mpeg mp3
AddType audio/mp4 m4a
AddType audio/ogg ogg
AddType audio/ogg oga
AddType audio/webm webma
AddType audio/wav wav

播放时间控制

duration firefox 没有！

seekable，played 返回的是 TimeRanges 对象 {length:x,start(),end()}。

buffered 用来检测下载了多少；played 播放了多少。返回的是 TimeRanges 对象

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(0);  // Returns the starting time (in seconds)
mediaElement.seekable.end(0);    // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(0);      // Returns the number of seconds the browser has played

播放特定时间段

#t=[starttime][,endtime]

如

http://foo.com/video.ogg#t=10,20 从第10秒到第20秒

http://foo.com/video.ogg#t=,02:00:00 从开始到两小时

http://foo.com/video.ogg#t=60 从60秒到结束

兼容播放器

对不支持 html5 audio 的浏览器，要么 flash（个人推荐 jwplayer），要么 Java applet called Cortado

检测资源

To detect that all child source elements have failed to load, check the value of the media element’s networkState attribute. If this is HTMLMediaElement.NETWORK_NO_SOURCE, you know that all the sources failed to load.

其它

controls 表示是否显示控制界面（浏览器内置的 div）。

poster 预览图片

preload 有三个值

  • none 不预加载
  • metadata 只加载meta信息（文件大小等）
  • auto 预加载
  • 空字符串 等于 auto

volume 0-1 音量大小

loop 循环

muted 静音

参考资料：