<!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中新加入的一些新特性的使用方法。推荐你去一个叫做秒秒学的网站上去查找相关的课程资料。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<body>标签中，输入html代码：<audio controls autoplay loop src="11704.mp3"></audio>。
3、浏览器运行index.html页面，此时进入页面就自动播放音频文件，并且会循环播放。
新建一个“audio.html”的html文件。
将音频文件放入“audio.html”文件同一目录下。
audio是html5新标签，所以我们填入html5的标准化代码，然后编写一个audio标签，引用同级目录下音频文件，并设置音频播放控件（必须填写）。
将“audio.html”文件用浏览器打开，我们就制作好了一个简单播放音频的播放器，点击播放按钮，就会播放出音频。
为了格式更加好看和解决有点浏览器不兼容audio问题，我们可以用source引用多个不同格式音频文件，同时在下方写入一段友情提示。
下面我们讲解下其他属性值对播放器的影响，autoplay属性为audio标签自动播放属性，当我们设置后，网页刷新后音频就会自动播放，效果如下图。
muted将音频设置为静音，默认情况为静音状态。
除了以上属性外，audio的loop属性设置音频的重复播放，preload属性设置音频是否被加载以及如何加载等等。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）