HTML5中的音频和视频播放

最新推荐文章于 2022-03-31 16:47:30 发布

中情

最新推荐文章于 2022-03-31 16:47:30 发布

阅读量377

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/zhongqing_fzq/article/details/51895776

版权

Web前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>音频和视频控件</title>
</head>
<body>

 


 


<div id="btns">
<button οnclick="play()" style="float:left;padding-left:5px">播放/暂停</button>
<button οnclick="getBig()" style="float:left;padding-left:5px">放大</button>
<button οnclick="getSmall()" style="float:left;padding-left:5px">缩小</button>
<button οnclick="getOriginal()" style="float:left;padding-left:5px">恢复原状</button>
</div>
<video id="v1" width="320" height="240" controls>
<source src="forrest_gump.mp4" type="video/mp4"/>
<source src="forrest_gump.ogg" type="video/ogg" />
</video>
<script>
var flag = false;//标记此时视频的播放状态
var video = document.getElementById("v1");
var wid = video.width;
function play() {

if (flag) /*方法二：if(video.played)*/{
video.pause();
//flag = false;
}
else if(video.paused){
video.play();
//flag = true;
}

}
function getBig() {
video.width = 560;
}
function getSmall() {
video.width = 300;
}
function getOriginal() {
video.width = wid;
}
</script>

</body>
</html>