HTML5视频自动循环播放

时间:2025-04-10 08:05:17
<!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>