HTML5中 video和audio这两个标签是干嘛的,如何设置其属性?

发布网友发布时间：2022-04-23 06:18

共1个回答

热心网友时间：2022-04-19 23:19

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中新加入的一些新特性的使用方法。推荐你去一个叫做秒秒学的网站上去查找相关的课程资料。