HTML5视频自动循环播放方法【详细介绍】

站长老油条 • 2022年9月13日 09:31 • 技术

HI，小伙伴们你们好，今天何泽湘比较忙，抽个时间来说下关于HTML5视频自动循环播放方法，还有关于HTML5视频播放视频,属性,模板等一系列的内容，成功的路上不会一帆风顺，每一个成功的背后都有一个惊人的故事。

如果需要在网页中添加视频，可以参考下面的代码，支持MP4视频自动循环播放。

纯HTML5视频自动循环播放

不过火狐浏览器貌似默认禁止自动播放音频视频，需要到选项 → 隐私与安全 → 自动播放，设置允许音频和视频。

如果不设置就可以自动播放，可以使用代码二。

配合JS自动循环播放



HTML5视频自动循环播放







window.onload=function(){
varlocal1=document.getElementById('videoID');//获取，函数执行完成后local内存释放
local1.autoplay=true;//自动播放
local1.loop=true;//循环播放
local1.muted=true;//关闭声音，如果为false,视频无法自动播放
if(local1.paused){//判断是否处于暂停状态
local1.play();//开启播放
}else{
local1.pause();//停止播放
}
}
functionbtn(){
varlocal=document.getElementById('videoID');//获取，函数执行完成后local内存释放
if(local.paused){//判断是否处于暂停状态
local.play();//开启播放
}else{
local.pause();//停止播放
}
}

不想显示播放控制按钮可以将controls="controls"删除。

代码中外链的广告视频，加载可能有点慢，换成自己的MP4视频。

其中：width:100%视频自动100%显示，vertical-align:middle用于消除视频下面的空隙。

参数属性

autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。