如果需要在网页中添加视频，可以参考下面的代码，支持MP4视频自动循环播放。
纯HTML5视频自动循环播放
<!DOCTYPE HTML> <html> <body> <video controls="controls" loop="loop" autoplay="autoplay" style="width:100%;vertical-align:middle;"> <source src="movie.ogg" type="video/ogg" /> <source src="https://v.mifile.cn/b2c-mimall-media/71fa48c0e68fe732a3b7c28e1b33278d.mp4" type="video/mp4" /> </video> </body> </html>
不过火狐浏览器貌似默认禁止自动播放音频视频，需要到选项 → 隐私与安全 → 自动播放，设置允许音频和视频。
如果不设置就可以自动播放，可以使用代码二。
配合JS自动循环播放
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5视频自动循环播放</title>
</head>
<body>
<video id="videoID" controls="controls" style="width:100%;vertical-align:middle;">
<source src="https://jdvodoss.jcloudcache.com/vodtransgzp1251412368/9031868223153446912/v.f30.mp4" type="video/mp4" />
</video>
</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>不想显示播放控制按钮可以将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 | 设置视频播放器的宽度。 |
相关专题
HTML5
2021-10-20 1117HTML5专题为您整理收集本站全部关于HTML5相关内容,主要为HTML5模板分享下载,HTML5教程文章或视频教程分享,还有HTML5开发的源码下载等等....
- 响应式html5环保设备pbootcms模板 [2024-08-24]
- HTML5自适应樱花网址导航php源码,SEO增强版 [2023-10-14]
- 响应式IT互联网营销策划HTML5整站模板 [2023-07-31]
- HTML5响应式游戏下载网页模板 [2023-06-27]
- HTML5响应式手机APP应用官方网站模板 [2023-05-11]
