JS视频实现放大，缩小事件

最新推荐文章于 2024-03-25 10:30:58 发布

Good luck—dys

最新推荐文章于 2024-03-25 10:30:58 发布

阅读量893

点赞数 2

文章标签： javascript 音视频开发语言

本文链接：https://blog.csdn.net/m0_74359467/article/details/133272292

版权

上一篇博客呢，叫大家视频如何实现暂停播放还有播放效果，这一篇博客教大家如何实现放大缩小的一个效果

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 


	function makeBig()
{ 
	myVideo.width=560; 
} //放大事件

	function makeSmall()
{ 
	myVideo.width=320; 
} //缩小事件

	function makeNormal()
{ 
	myVideo.width=420; 
} //普通大小事件
</script> 

</body> 
</html>

当然呢你要是想实现视频一直循环播放的效果,就请接着往下看吧~

自动播放以及循环播放的代码

<video muted autoplay="autoplay" loop="loop">
	<source src="image/01.mp4" type="video/mp4"></source>
</video>
<!--muted：静音播放  注：高版本浏览器对视频静音后可以保证视频自动播放-->
<!--autoplay：自动播放-->
<!--loop：循环播放-->