HTML5 Audio/Video 汇总!!!

2016-11-02  本文已影响58人  唐艺和风榻榻米丨大连店

在HTML5中的音视频标签的属性也不是很多,w3school有很详细的讲解。
主要是在JS中我们应该如何去控制音视频的状态。以下属性和方法相信大家都会用的到。

<audio> 标签属性:

<ul><li>src:音乐的URL
<li>preload:预加载
<li>autoplay:自动播放
<li>loop:循环播放
<li>controls:浏览器自带的控制条
</ul>

<video> 标签属性:

<ul><li>src:视频的URL
<li>poster:视频封面,没有播放时显示的图片
<li>preload:预加载
<li>autoplay:自动播放
<li>loop:循环播放
<li>controls:浏览器自带的控制条
<li>width:视频宽度
<li>height:视频高度
</ul>

获取HTMLMediaElements对象

<ol>
<li>var media = new Audio(http://www.test.com/test.mp3);
<li>var media = document.getElementsbyId("media");(引号内的media是你音视频标签的id值)
</ol>

浏览器兼容影音格式

浏览器、影音格式 Ogg Theora MP4(H.264) WebM
Microsoft Internet Explorer9 × ×
Mozilla Firefox5+ ×
Google Chrome13+
Apple Safari5+ × ×
Opera11+" ×

重点来了!!! 以下JS部分有需要收藏的赶紧拿走~<code>

<ol><li>//错误状态
<li> Media.error; //null:正常
<li> Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
<li>//网络状态
<li> Media.currentSrc; //返回当前资源的URL
<li> Media.src = value; //返回或设置当前资源的URL
<li> Media.canPlayType(type); //是否能播放某种格式的资源
<li> Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
<li> Media.load(); //重新加载src指定的资源
<li> Media.buffered; //返回已缓冲区域,TimeRanges
<li> Media.preload; //none:不预载 metadata:预载资源信息 auto:

<li>//准备状态
<li> Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
<li> Media.seeking; //是否正在seeking

<li>//回放状态
<li> Media.currentTime = value; //当前播放的位置,赋值可改变位置
<li> Media.startTime; //一般为0,如果为流媒体或者不从0开始的资源,则不为0
<li> Media.duration; //当前资源长度 流返回无限
<li> Media.paused; //是否暂停
<li> Media.defaultPlaybackRate = value;//默认的回放速度,可以设置
<li> Media.playbackRate = value;//当前播放速度,设置后马上改变
<li> Media.played; //返回已经播放的区域,TimeRanges,关于此对象见下文
<li> Media.seekable; //返回可以seek的区域 TimeRanges
<li> Media.ended; //是否结束
<li> Media.autoPlay; //是否自动播放
<li> Media.loop; //是否循环播放
<li> Media.play(); //播放
<li> Media.pause(); //暂停
<li>//控制
<li> Media.controls;//是否有默认控制条
<li> Media.volume = value; //音量
<li> Media.muted = value; //静音
<li> //TimeRanges(区域)对象
<li> TimeRanges.length; //区域段数
<li> TimeRanges.start(index) //第index段区域的开始位置
<li> TimeRanges.end(index) //第index段区域的结束位置
</ol>

以下转自http://www.cnblogs.com/luckk/p/5239991.html,欢迎大家探讨交流

上一篇下一篇

猜你喜欢

热点阅读