HTML5 中的新元素标签
src：音频文件路径。
autobuffer：设置是否在页面加载时自动缓冲音频。
autoplay：设置音频是否自动播放。
loop：设置音频是否要循环播放。
controls：属性供添加播放、暂停和音量控件。
这些属性和<video>元素标签的属性很类似
常用的控制函数：
1.load()：加载音频、视频软件
2.play()：加载并播放音频、视频文件或重新播放暂停的的音频、视频
3.pause()：暂停出于播放状态的音频、视频文件
4.canPlayType(obj)：测试是否支持给定的Mini类型的文件
可脚本控制的属性值：
1.autoplay：自动播放已经加载的的媒体文件
2.loop为true：的时候则设定为自动播放
3.currentTime：以s为单位返回从开始播放到目前所花的时间
4.controls：显示或者隐藏用户控制界面
5.volume：音量值,从0.0至1.0之间
6.muted：设置是否静音
7.autobuffer：是否进行缓冲加载
audioTracks返回表示可用音频轨道的 AudioTrackList 对象。
autoplay 设置或返回是否在就绪（加载完成）后随即播放音频。
buffered 返回表示音频已缓冲部分的 TimeRanges 对象。
controller 返回表示音频当前媒体控制器的 MediaController 对象。
controls 设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin设置或返回音频的 CORS 设置。
currentSrc 返回当前音频的 URL。
currentTime设置或返回音频中的当前播放位置（以秒计）。
defaultMuted 设置或返回音频默认是否静音。
defaultPlaybackRate 设置或返回音频的默认播放速度。
duration返回音频的长度（以秒计）。
ended 返回音频的播放是否已结束。
error 返回表示音频错误状态的 MediaError 对象。
loop设置或返回音频是否应在结束时再次播放。
mediaGroup 设置或返回音频所属媒介组合的名称。
muted 设置或返回是否关闭声音。
networkState返回音频的当前网络状态。
paused 设置或返回音频是否暂停。
playbackRate设置或返回音频播放的速度。
played 返回表示音频已播放部分的 TimeRanges 对象。
preload 设置或返回音频的 preload 属性的值。
readyState 返回音频当前的就绪状态。
seekable返回表示音频可寻址部分的 TimeRanges 对象。
seeking 返回用户当前是否正在音频中进行查找。
src 设置或返回音频的 src 属性的值。
textTracks 返回表示可用文本轨道的 TextTrackList 对象。
volume 设置或返回音频的音量。
方法 描述
addTextTrack() 向音频添加新的文本轨道。
canPlayType() 检查浏览器是否能够播放指定的音频类型。
fastSeek() 在音频播放器中指定播放时间。
getStartDate()返回新的 Date 对象，表示当前时间线偏移量。
load() 重新加载音频元素。
play()开始播放音频。
pause() 暂停当前播放的音频。
HTML5中的autoplay属性是设置为自动播放。如果设置了该属性，视频或音频将自动播放。但是需要注意的是部分浏览器比如Safari屏蔽了autoplay属性。因为autoplay在移动网络环境下可能会造成用户流量费剧增。
iOS 3.2之前可以通过js模拟一个点击事件来触发，但在之后的版本中就不再有效了，Safari完全屏蔽了autoplay，除非用户自己点击播放，目前没有其他任何办法可以实现autoplay。
HTML5中的 video和audio这两个标签是HTML5中专门用来播放视频和音频资源的标签。video标签和audio标签也提供了很实用的JavaScript API，允许创建自定义的控件。这两个标签的用法我们通过下面这个示例来进行说明一下。<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>video标签和audio标签</title>
<head>
<body>
<h2>video标签的使用</h2>
//使用video标签播放视频Kobe.mp4 其中controls控制是否要显示视频控件
<h2>使用video标签的API</h2>
<video src="kobe.mp4" controls="controls" id="video">
你的破浏览器可以退休了，赶紧升级吧！
</video>
//通过HTML5中Video提供的API 可以自定义控件控制视频的播放
<br/>
<input type="button" value="播放" onclick="playVideo()" />
<input type="button" value="停止" onclick="stopVideo()" />
<input type="button" value="快进10秒" onclick="forward()" />
<input type="button" value="快退10秒" onclick="back()" /><br/>
<input type="button" value="闭嘴" onclick="shutup(this)" />
<input type="button" value="加速x2" onclick="fast()" />
<input type="button" value="减速x2" onclick="slow()" />
<input type="button" value="正常倍速" onclick="normal()" /><br/>
<input type="button" value="大声点" onclick="up()" />
<input type="button" value="小声点" onclick="down()" />
<script>
var video=document.getElementById("video")
//播放视频
function playVideo(){
video.play()
}
//停止视频
function stopVideo(){
video.pause()
}
//快进10秒
function forward(){
video.currentTime+=10
}
//快退10秒
function back(){
video.currentTime-=10
}
//静音
function shutup(obj){
if(video.muted){
video.muted=false
obj.value="闭嘴"
}else{
video.muted=true
obj.value="说话"
}
}
//加速x2
function fast(){
video.playbackRate=2//默认播放速度为1
}
//减速x2
function slow(){
video.playbackRate=1/2
}
//正常倍速
function normal(){
video.playbackRate=1
}
//大声点
function up(){
video.volume+=0.1//声音值的范围为0-1
}
//小声点
function down(){
video.volume-=0.1//声音值的范围为0-1
}
</script>
//使用audeo标签播放音频wow.mp3 其中controls控制是否要显示视频控件，我们也可以和视频一样自定义控件来控制音频的播放，方法时类似的
<h2>audio标签的使用</h2>
<audio src="wow.mp3" controls>
你的破浏览器可以退休了，赶紧升级吧！
</audio>
</body>
</html>
这些都是HTML5中新加入的一些新特性的使用方法。推荐你去一个叫做秒秒学的网站上去查找相关的课程资料。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）