您的位置：首页 > Web前端 > HTML5

HTML5 - video标签和audio标签

2015-04-27 23:16 423 查看

<!doctype html>

<html lang="zh-CN">

<head>

<meta charset="utf-8" />

<title>video标签和audio标签</title>

<head>

<body>

<h2>video标签的使用</h2>





<h2>使用video标签的API</h2>

<video src="kobe.mp4" controls="controls" id="video">

你的破浏览器可以退休了，赶紧升级吧！

</video>

<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>

<h2>audio标签的使用</h2>

<audio src="wow.mp3" controls>

你的破浏览器可以退休了，赶紧升级吧！

</audio>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5 video标签和audio标签

相关文章推荐

新的分享

章节导航