HTML5中 video和audio这两个标签是干嘛的，如何设置其属性？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5中 video和audio这两个标签是干嘛的，如何设置其属性？相关的知识，希望对你有一定的参考价值。
参考技术A 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中新加入的一些新特性的使用方法。推荐你去一个叫做秒秒学的网站上去查找相关的课程资料。本回答被提问者采纳
以上是关于HTML5中 video和audio这两个标签是干嘛的，如何设置其属性？的主要内容，如果未能解决你的问题，请参考以下文章
audio标签HOVER效果rgba和opacity隐藏场景