HTML5视频自动循环播放

程序员文章站 2022-05-11 17:04:26

...

HTML5视频自动循环播放

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

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

HTML5视频自动循环播放

HTML5视频自动循环播放

Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件

iOS实现自动循环播放的banner实例详解

C# 使用WPF 用MediaElement控件实现视频循环播放

Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件

iOS实现自动循环播放的banner实例详解

C# 使用WPF 用MediaElement控件实现视频循环播放

Vegas视频怎么设置循环播放? Vegas循环播放的设置方法

html5视频播放_动力节点Java学院整理

Android选择图片或视频进行循环播放

html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)