HTML5视频自动循环播放

最新推荐文章于 2024-02-26 18:19:08 发布

susan花雨

最新推荐文章于 2024-02-26 18:19:08 发布

阅读量3.6k

点赞数 1

分类专栏： web前端文章标签： html5 音视频 javascript

原文链接：https://blog.csdn.net/lakelise/article/details/97028451

版权

web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

默认打开页面，自动播放视频，按钮可控制视频的播放和停止

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>HTML5视频自动循环播放</title>
 </head>
 <body>
	<video id="videoID" controls="controls" style="width:500px">
	  <source src="test.mp4" type="video/mp4"/>
	</video>
	<br/>
	<button id="con" onclick="btn()">开始/暂停 </button>
 </body>
<script  type="text/javascript">
	window.onload = function() {
		var local1=document.getElementById('videoID');  //获取，函数执行完成后local内存释放
		local1.autoplay = true; // 自动播放
		local1.loop = true; // 循环播放
		local1.muted=true; // 关闭声音，如果为false,视频无法自动播放
		if(local1.paused){  //判断是否处于暂停状态
			local1.play();  //开启播放
	    }else{		   
			local1.pause();  //停止播放
	    }
    }

    function btn(){
		var local=document.getElementById('videoID');  //获取，函数执行完成后local内存释放
		if(local.paused){  //判断是否处于暂停状态
			local.play();  //开启播放
	    }else{
			local.pause();  //停止播放
	    }
	} 

</script>
</html>